0

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

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

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

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

4

1 回答 1

2

这不是Web 组件的限制，它是 shadowDOM 的工作方式。

片段标识符通过ID 引用起作用，因此它们仅在“主”DOM 中起作用，而不是在 shadowDOM 中（也不在 IFRAME 中）。

document.querySelector( )在 shadowDOM 中也无法访问那些 ID，因为 shadowDOM 的本质是隔离内容。

所以你要么：

  1. 不要使用shadowDOM，你真的需要shadowDOM特性吗？

    该样式应该是全局 CSS 设置，如果您不使用 shadowDOM ，则应用该设置
  2. 使用 shadowDOM 从每个元素注册一个文档点击侦听器，它会检查片段标识符是否在其 shadowDOM 范围内
    ，因为自定义元素可以访问其主机，而 IFRAME 无法
    访问此事件模型最适合使用shadowDOM解耦组件
  3. 编写一些更复杂的代码，从主 DOM调用所有代码<foot-note> 
     [...document.querySelectorAll("foot-note")]
 .forEach( footnote => footnote.shadowRoot.getElementById(...) )

恕我直言，您网站中的所有组件都不需要 shadowDOM；这将使您的设计更容易，因为您不再拥有shadowDOM 范围的CSS，一切都将是全局 CSS

W3C Web 组件标准有 3 种不同的技术

  • 模板
  • 自定义元素 API
  • 影子DOM

每个都可以单独使用！

于 2020-12-29T10:26:44.700 回答