问题标签 [native-web-component]

我在将我的 webcomponent 实例的采用样式表添加到文档中时遇到问题。

我的自定义 web 组件在构造函数中创建了一个新的 CSSStyleSheet 实例。当组件被 connectedCallback 升级时，它会将实例添加到 document.adoptedStyleSheets 中。然后我有一个 update() 方法，稍后可以调用它来更改所采用样式表的 css 属性。

在以下示例中，您可以看到用法。我的 HTML 包含两个自定义组件和一些用于添加和删除样式属性的按钮。

我们可以使用添加按钮为这两个组件添加不同的样式。一切正常，直到开发人员属性未打开。如果您打开开发人员属性并重新加载示例，似乎添加到采用的样式表的两个 CSSStyleSheet 实例都引用了同一个实例。

单击元素 1 旁边的“应用样式”按钮将为元素 1 添加一个绿色边框。

单击元素 2 旁边的“应用样式”按钮将为元素 2 添加黑色边框。

但它删除了元素 1 的样式。这不应该发生，因为元素 1 的 CSSStyleSheet 对象仍然应该具有自己的 css 属性。但他们迷路了。

我的第二个示例解决了这个问题。如果我直接在 connectedCallback 中调用 replaceSync('')，everythink 会像预期的那样工作。

谁能告诉我，为什么会这样？

我正在定义一个自定义元素

https://jsfiddle.net/tuxkjp3q/

但是当我点击它时，什么也没有发生。

为什么会这样？如何在不覆盖构造函数的情况下将事件处理程序附加到类的每个实例？

编辑：

当我检查 DOM 对象时，有一个 onclick 处理程序，但它不起作用。这令人困惑

编辑2：

进一步的发现，当从原型中省略时，定义一个处理程序是可行的

但是当原型包含 时onclick，相同的处理程序不再起作用

如果我们能得到这个现象的解释，我会非常高兴。

编辑 3：

如果有人遇到同样的问题，我想出了一个解决方法。可能值得注意的是，只有在实例化类的直接原型中定义的处理程序才会被附加，这有利于性能，但可能存在逻辑缺陷。无论如何，它可以根据您的要求进行调整。

我仍然非常有兴趣了解其中的原因。

直到最近，每当我需要 HTML 中的自定义属性时，我总是使用HTML5 data-* 自定义属性。

最近开始尝试使用WebComponents，特别是自定义元素，我开始考虑自定义属性，这些属性不是HTML5 data-* 自定义属性。

在无意中采用任何不推荐的做法之前，我想澄清以下几点......

在下面的列表中，我们有 4 个元素：

• 元素 i是具有data-*属性的标准元素
• 元素 ii是具有自定义属性的标准元素
• 元素 iii是具有data-*属性的自定义元素
• 元素 iv是具有自定义属性的自定义元素

尽管上述设置在技术上有效，但以下哪项是正确的：

• A)自定义属性可以在标准元素和自定义元素中普遍使用。

  • 结论：元素i , ii , iii & iv都是有效的

• B)自定义属性只能用于自定义元素。它们在其他地方无效。

  • 结论：元素i、iii和iv有效，而ii无效

• C) Data-* 属性用于标准元素，自定义属性用于自定义元素。

  • 结论：元素i和iv有效，而ii和iii无效

• D）自定义属性甚至不是一回事。你是从哪里得到这个想法的？

  • 结论：元素i和iii有效，而ii和iv无效

添加：

为了说明我上面的问题，我想举一个自定义属性似乎无效的示例：

1. 转到：https ://validator.w3.org/nu/#textarea

2. 选择文本输入

3. 进入：

4. 检查标记

验证器返回错误：

错误：此时inverted元素上不允许使用属性。div

从第 10 行第 1 列开始；到第 10 行第 22 列

i</div>↩↩<div inverted="false">ii</di

虽然......我不确定https://validator.w3.org/nu/上的工具是否已过时和/或被放弃，返回的错误不应再被视为 2020 年的错误（？）

我apprun在 pug html 模板中导入脚本，以便可以使用它的功能。（参考）我在哪里可以编写 JavaScript 以在渲染后将这个组件挂载到 pug 模板中？

这是我的哈巴狗文件：

组件：

例如，我希望能够用 HTML 编写这个：

JS：

我最终得到的（虽然并不意外）：

我想要的是：

为了让 Web 组件相互通信，我使用了自定义事件。让我们想象一下：

WebComponentA 使用或包含 WebComponentB，如果单击按钮，WebComponentB 会发送一个 CustomEvent（气泡：true，composition：true）。如果 WebComponentB 发送此事件，WebComponentA 想要做某事。

我应该如何在 WebComponentB 中调度事件？

或者

我应该如何在 WebComponentA 中捕获事件？

或者

我应该考虑使用一种或另一种的负面影响吗？

谢谢！

我对 webcomponents 很感兴趣（而且对 javascript 很陌生），我正在尝试建立一个虚拟的微前端应用程序。好的，组件由不同的 Web 服务器（老实说是 webpack devserver）提供服务，并正确显示在“聚合器”页面中。我还添加了一个自定义事件以将一些文本从一个 web 组件发送到另一个，这不起作用。这是发件人 Web 组件：

这是接收器：

问题是事件被发出和接收，但其中没有detail。为什么接收器组件无法记录另一个正在发送的文本，我错过了什么？

你可以在这里看到整个虚拟项目。

这个问题的一个非常简单的例子是<foot-note>我为我的新网站fanaro.io创建的自定义 Web 组件。

通常，似乎对页内链接有效的是id为特定元素创建和，然后使用<a>with href="#id_name"。但是，当元素位于 内时，这似乎不起作用shadowRoot，URL 链接仍然正确附加，但没有任何反应。使用document.querySelector("#id_name");似乎也不起作用。您可以单击我任何文章的任何<sup>脚注，然后使用检查来检查。

这是 Web 组件的限制还是我在这里遗漏了什么？如果我想进行页内链接，我最终是否必须放弃 Web 组件？或者也许添加自定义onClick方法？

问题已经解决，可以在 commit 之前找到4d2ef0d4fb5c8fe56c76d60eb7274c85bae81d94。在这个问题上也有链接

我有完全相同的html：

如果文件作为Content-Type text/html; charset=UTF-8. 如果它被用作Content-Type application/xhtml+xml那么它们都是空的。无论有没有shadowDom.

如果我有

然后我得到了hello world。我在 FF 和 Chrome 上都得到了完全相同的行为，所以它看起来像预期的那样工作 - 这是在哪里记录的？

是不是因为浏览器 DOM API 不再是 html5 DOM 并变成 XML DOM，这意味着它不再可能分配给innerHTML，并且需要使用诸如DOMParser等工具？

我编写了一个扩展 HTMLElement 的类，并准备使用 customElements.define 将元素绑定到 Dom。我认为可以根据需要创建尽可能多的元素，但不知何故并非如此。

我的 HTML 看起来有这两个元素

错误

如何在屏幕上显示两个按钮？

谢谢