使用 Shadow Root 和本机 Web 组件进行页内链接
In-page Linking with Shadow Root and Native Web Components
这个问题的一个非常简单的例子是 <foot-note> custom web component I've created for my new website, fanaro.io.
通常，页内 linking 的工作似乎是为特定元素创建和 id，然后使用 <a> 和 href="#id_name"。然而，当元素位于 shadowRoot 内时，这似乎不起作用，URL link 仍然正确附加，但没有任何反应。使用 document.querySelector("#id_name"); 似乎也不起作用。您可以单击 any of my articles 上的任何 <sup> 脚注，然后使用检查来检查它。
这是 Web 组件的限制还是我在这里遗漏了什么？如果我想在页内 linking，我是否必须放弃 Web Components？或者添加自定义 onClick 方法？
The problem has been solved and can be found before commit 4d2ef0d4fb5c8fe56c76d60eb7274c85bae81d94. It's also linked in this issue
它不是 Web 组件限制，它是 shadowDOM 的工作方式。
A 片段标识符 通过 ID 引用工作，因此它们仅在 'main' DOM 中工作，而不在 shadowDOM 中工作（并且不在 IFRAME 中）。
document.querySelector( )也无法访问shadowDOM中的那些ID，因为shadowDOM的本质就是隔离内容
所以你要么：
- 不要使用 shadowDOM，你真的需要 shadowDOM 功能吗？
该样式应该是全局 CSS 设置，如果您 not 使用 shadowDOM
- 从每个具有阴影的元素注册一个文档点击监听器DOM，它检查片段标识符是否在其阴影DOM范围内
因为自定义元素可以访问它的宿主，而 IFRAME 不能
此事件模型最适合解耦组件 with shadowDOM
- 编写一些更复杂的代码，从主 DOM 中调用所有
<foot-note>
[...document.querySelectorAll("foot-note")]
.forEach( footnote => footnote.shadowRoot.getElementById(...) )
恕我直言 none 您站点中的组件需要阴影DOM；它会让你的设计更容易，因为你不再有 shadowDOM scoped CSS，一切都将是全局的 CSS
W3C Web 组件标准有 3 种不同 技术
- 模板
- 自定义元素API
- 阴影DOM
每个都可以使用没有另一个！
这个问题的一个非常简单的例子是 <foot-note> custom web component I've created for my new website, fanaro.io.
通常，页内 linking 的工作似乎是为特定元素创建和 id，然后使用 <a> 和 href="#id_name"。然而，当元素位于 shadowRoot 内时，这似乎不起作用，URL link 仍然正确附加，但没有任何反应。使用 document.querySelector("#id_name"); 似乎也不起作用。您可以单击 any of my articles 上的任何 <sup> 脚注，然后使用检查来检查它。
这是 Web 组件的限制还是我在这里遗漏了什么？如果我想在页内 linking，我是否必须放弃 Web Components？或者添加自定义 onClick 方法？
The problem has been solved and can be found before commit
4d2ef0d4fb5c8fe56c76d60eb7274c85bae81d94. It's also linked in this issue
它不是 Web 组件限制，它是 shadowDOM 的工作方式。
A 片段标识符 通过 ID 引用工作，因此它们仅在 'main' DOM 中工作，而不在 shadowDOM 中工作（并且不在 IFRAME 中）。
document.querySelector( )也无法访问shadowDOM中的那些ID，因为shadowDOM的本质就是隔离内容
所以你要么：
- 不要使用 shadowDOM，你真的需要 shadowDOM 功能吗？
该样式应该是全局 CSS 设置，如果您 not 使用 shadowDOM - 从每个具有阴影的元素注册一个文档点击监听器DOM，它检查片段标识符是否在其阴影DOM范围内
因为自定义元素可以访问它的宿主，而 IFRAME 不能
此事件模型最适合解耦组件 with shadowDOM - 编写一些更复杂的代码，从主 DOM 中调用所有
<foot-note>[...document.querySelectorAll("foot-note")] .forEach( footnote => footnote.shadowRoot.getElementById(...) )
恕我直言 none 您站点中的组件需要阴影DOM；它会让你的设计更容易，因为你不再有 shadowDOM scoped CSS，一切都将是全局的 CSS
W3C Web 组件标准有 3 种不同 技术
- 模板
- 自定义元素API
- 阴影DOM
每个都可以使用没有另一个！