Web组件是使用本机代码或第三方库创建的可重用客户端元素。
来自react背景，我想知道lit-element中的state和setState等价物在哪里，我在lit-element文档中找不到任何有用的东西。是私有财产吗？或请求更新...
我用 Preact 创建了这个 Web 组件，我正在尝试使用 Material ui 来设置它的样式。阅读 Preacts 文档，https://preactjs.com/about/libraries-addons/，它声称支持
如何避免Web Components中的槽元素在其余元素渲染之前出现？
我的问题是，在渲染 Web 组件的其余部分之前，开槽元素以原始形式出现。想象一下，您有一个 Web 组件，您可以在其中设置几个不同的 HTML 元素的样式，包括...
本机 JS Web 组件的 Blazor 包装器中 CustomEvent 的 null 值
我们正在尝试为我们的本机 Javascript Web 组件库构建 Blazor 包装器。 每当用户更改文本字段的值时，我们的输入都会发出自定义事件 valueChange （即：...
this.shadowRoot.innerHTML = ` @font-face { 字体系列：SpaceGrotesk； src: url(/fonts/SpaceGrotesk-Medium.ttf); } @font-face { 字体系列：</desc> <question vote="1"> <pre><code> this.shadowRoot.innerHTML = ` <style> @font-face { font-family: SpaceGrotesk; src: url(/fonts/SpaceGrotesk-Medium.ttf); } @font-face { font-family: SpaceGroteskLight; src: url(/fonts/SpaceGrotesk-Light.ttf); } * { box-sizing: border-box; } .tipme { position: relative; font-size: 1.4rem; font-family: SpaceGrotesk, sans-serif; text-align: center; background-color: #fff; padding: 4rem 1.4rem 1.4rem; box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08); margin: 5rem 1.4rem 1.4rem; width: 50rem; } h1 { font-family: SpaceGroteskLight, sans-serif; font-weight: 400; font-size: 2.6rem; margin: 1rem; } `; </code></pre> <p>浏览器未请求字体文件。</p> <p>我在隐身模式下尝试过，所以这不是缓存问题。</p> <p>这是一个在多个站点上运行的分布式组件，因此我不能只在父 html 中加载字体。需要封装一下。</p> </question> <answer tick="true" vote="2"> <p>我最终只是动态地将样式加载字体添加到父页面：</p> <pre><code> this.fonts = ` @font-face { font-family: SpaceGrotesk; src: url(${this.host}/fonts/SpaceGrotesk-Medium.ttf); } @font-face { font-family: SpaceGroteskLight; src: url(${this.host}/fonts/SpaceGrotesk-Light.ttf); } `; const style = document.querySelector('style[data-description="tipme-fonts"]'); if (!style) { const el = document.createElement('style'); el.dataset.description = 'tipme-fonts'; el.appendChild(document.createTextNode(this.fonts)); document.head.appendChild(el); } </code></pre> </answer> </body></html>
在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...
在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...
我正在学习如何使用自定义 Web 组件。我尝试使用自定义组件创建一个表行。这是 HTML： &... 我正在学习如何使用自定义 Web 组件。我尝试使用自定义组件创建一个表行。这是 HTML： <table border="2"> <tbody> <table-row></table-row> <table-row></table-row> </tbody> </table> 这是 JavaScript： // Create a class for the element class TableRow extends HTMLElement { constructor() { // Always call super first in constructor super(); } connectedCallback() { let tr = document.createElement('tr') let td = document.createElement('td') td.textContent = "Row content"; tr.append(td); this.append(tr); } } customElements.define("table-row", TableRow); 这是一个 JSFiddle：https://jsfiddle.net/Imabot/c92fye8d/1/ 如您所见，它没有按预期工作。 我做错了什么吗？ 一般来说，构建自定义组件时，我们应该填充还是替换自定义标签<table-row></table-row>？ // Create a class for the element class TableRow extends HTMLElement { constructor() { // Always call super first in constructor super(); } connectedCallback() { let tr = document.createElement('tr') let td = document.createElement('td') td.textContent = "Row content"; tr.append(td); this.append(tr); } } customElements.define("table-row", TableRow); <table border="2"> <tbody> <table-row></table-row> <table-row></table-row> </tbody> </table> 您不能在表格中使用自定义标签，也不建议这样做。 您可以做的是将 a 定义为自定义行，如下例所示： class CustomTableRow extends HTMLTableRowElement { constructor() { super(); // Always call super first in constructor // Your custom initialization } connectedCallback() { let td = document.createElement('td'); td.textContent = "Row content"; this.appendChild(td); } } customElements.define('custom-table-row', CustomTableRow, { extends: 'tr' }); <table border="2"> <tbody> <tr is="custom-table-row"></tr> <tr is="custom-table-row"></tr> </tbody> </table>
如何将 Svelte 3 组件编译为可在 vanilla js 中使用的 IIFE
我正在 Vanilla JS 中制作一个 Web 组件，它在后台使用隐藏的选择，在前面使用 div 和 ul>li。从 api 等获取数据变得有点复杂，所以我转向
JS CustomElements - 首次实例化时自行“注册”
所以我正在寻找一种为自定义元素设置 ES6“抽象”基类的方法，该基类在子元素的第一次实例化时进行自我注册（window.customElements.define）。 我采取的方法...
所以我对 Web 组件和 Shadow dom 相当陌生。 我正在尝试创建其中包含 swiper Web 组件的 Web 组件，到目前为止一切正常；虽然我正在尝试制作自定义导航...
如何让 jest 支持在 TS 文件中导入 HTML 文件？
我有一个项目，其中有一些脚本可以在其中构建打字稿Web组件（此处）。 我使用 rollup 和 typescript 来构建我的 Web 组件，我的 Web 组件文件如下所示： 从...导入 HTML
我创建了一个 Web 组件，并从其中引用了我的资产文件夹中的图像 如下 在本地一切都很好，我发布了我的
未定义的属性测试 Lit typescript Web 组件
我最近将一个lit web组件转换为Typescript，似乎无法弄清楚为什么我的测试现在失败了..在转换之前一切都工作正常。 这些是我的依赖项...
如何使用影子 DOM 附加样式表根据子节点选择器设置自定义 HTML 元素的样式？
我有一个自定义 HTML 元素，可以对按钮元素进行分组： 福 酒吧 巴兹 &...
有什么方法可以在不使用JS的情况下更改shadow-root中的CSS吗？我的意思是仅CSS。我浏览了一些东西，但找不到一种没有 js 的方法。 假设我们有代码 有什么方法可以在不使用 JS 的情况下更改 Shadow-root 中的 CSS 我的意思是仅 CSS。我浏览了一些东西，但找不到一种没有 js 的方法。 假设我们有代码 <div id="parent"> #shadow-root (open) <div id="child"> </div> </div> 如何仅使用 CSS 访问子元素？ 仅当组件作者明确允许在影子 DOM 中的元素上使用 part 属性时。在这种情况下，您可以使用 ::part 伪元素选择器: 将 CSS 应用于该元素 这是一个例子： customElements.define('foo-bar', class extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}) this.shadowRoot.innerHTML = '<p part="baz">foo-bar here</p>'; } }); ::part(baz) { background-color: red; } <foo-bar></foo-bar> 请注意，您不能执行类似 ::part(foo) + .internal-css-class {...} 的操作（::part 不能成为复合选择器的一部分）。 除此之外，您始终可以使用CSS的继承属性，这些属性也会影响shadow DOM。例如。将 Web 组件放入 <h1> 将影响其字体大小和粗细（除非它专门为这些属性定义了自己的值）。
我正在开发一个 Angular 17 项目，并且拥有一个带有设计系统库的 Angular 工作区。我的目标是将这个库中的一些 Angular 组件转换为 Web 组件，使它们可用...
Shadow dom 封装了 css 样式，选择器不会跨越阴影边界。 问题：如何在shadow dom中使用全局通用的css样式？ （假设有一些常见的CSS样式......
使用支持 Shadow DOM 的纯 JavaScript 模拟 Tab 键按下
注意：这里和其他地方都存在现有问题，但它们都是特定于 jQuery 的，并且没有涵盖纯 JavaScript 的规范答案，包括对 Web 组件的支持。 我想模拟...
自主自定义元素中是否可以有一个“<li>”，而父元素“<ul>”不在同一个 ShadowDOM 中？
我过去的理解是，列表项 标签必须是 、 或 标签的直接子代。 但我一直在使用 Web 组件和自主自定义 elem... 我过去的理解是，列表项 <li> 标签必须是 <ul>、<ol> 或 <menu> 标签的直接子代。 但我最近一直在使用 Web 组件和自主自定义元素。我读到，对于自主自定义元素，内容模型是透明的。请参阅https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts 我想要一个自主自定义元素 <my-list>，其 ShadowDOM 中有一个 <ul>（或其他有效父元素之一，例如 ol 和 menu），以及第二个自主自定义元素 <my-list-item> ShadowDOM 中有一个 <li>。 （参见下面的“示例”。） 为什么？几个原因： CSS 样式范围仅限于 ShadowDOM 额外的事件处理程序 某些用例可能会发生更多情况，例如每个 <li> 除了 <slot> 之外还包含 ShadowDOM 子级 我使用的是 Lit 3，所以很自然地编写一个 Web 组件 根据 HTML 5 规范和辅助功能指南，类似下面这个示例的内容是有效还是无效？ 注意：我使用 <template shadowrootmode="open"> （参见此处 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#shadowrootmode ）使我的示例更加独立。在我的实际代码中，我使用 Lit 框架，它以编程方式创建 ShadowDOM。 示例： <my-list role="presentation"> <template shadowrootmode="open"> <ul> <slot /> </ul> </template> <my-list-item role="presentation"> <template shadowrootmode="open"> <li> <slot /> </li> </template> My text here </my-list-item> </my-list> 我认为这可能有效的另一个原因是我看到 axe-core 有一个看起来相似的单元测试： https://github.com/dequelabs/axe-core/blob/develop/test/checks/lists/only-listitems.js#L224-L232 it('should return false in a shadow DOM pass', () => { const node = document.createElement('div'); node.innerHTML = '<li>My list item </li>'; const shadow = node.attachShadow({ mode: 'open' }); shadow.innerHTML = '<ul><slot></slot></ul>'; const checkArgs = checkSetup(node, 'ul'); assert.isFalse(checkEvaluate.apply(checkContext, checkArgs)); }); 但看起来这是 axe-core 中的特定模式/选项，而不是默认行为？ 在理论上，你所说的都是有道理的。这意味着以下事情是正确的： 自定义元素具有符合规范的透明内容模型。 根据规范，当透明元素相互嵌套时，必须迭代应用该过程。 因此，这意味着您应该被允许创建完全自定义的列表。所以，这应该有效： <script> class MyList extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = ` <ul aria-label="Custom List"> <slot></slot> </ul> `; } } class MyListItem extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = ` <li> <slot></slot> </li> `; } } customElements.define('my-list', MyList); customElements.define('my-list-item', MyListItem); </script> <my-list aria-label="Custom Wrapper"> <my-list-item>Item 1</my-list-item> <my-list-item>Item 2</my-list-item> </my-list> 在这种情况下，<ul> 的影子根与 <li> 元素的影子根不同。对于上述定义，浏览器最终会生成以下可访问性树（来自 Chrome 浏览器）： 因此，根据规范，浏览器正确生成了大多数工具应该看到的可访问性树。我最好的猜测是，axe-core 在此给定测试中依赖相同的规格。但在实践中，情况有所不同。 许多辅助工具都有自定义解析器，这会破坏和/或对 HTML 结构做出假设（ShadowRoot 是一个常见的障碍） 甚至W3C 验证器也无法识别自定义元素。 尽管自定义元素规范正式考虑具有透明内容模型的自定义元素，但 <ul> 和 <ol> 的规范仍然明确限制它们仅具有 <li>、<script> 和 <template>。 （将来应该解决这个问题）。 因此，根据规范，您最好在完全不同的 Shadow DOM 中的自定义列表中拥有自定义列表元素，但实际上，可访问性仍然会受到影响。如果可能，最好依赖经典的 ul > li 或 ol > li 层次结构。