使用影子根和本机Web组件进行页面内链接
这个问题的一个非常简单的例子是我为我的新网站fanaro.io创建的fanaro.io自定义web组件。
通常，对页面内链接起作用的是为特定元素创建和id，然后在href="#id_name"中使用<a>。然而，当元素在shadowRoot中时，这似乎不起作用，URL链接仍然被正确地追加，但是什么也没有发生。使用document.querySelector("#id_name");似乎也不起作用。您可以单击<sup>在我的任何一篇文章上的任何脚注，然后使用检查来检查这一点。
这是Web组件的限制，还是我在这里遗漏了什么？如果我想做页面链接，我会不得不放弃Web组件吗？或者添加自定义的onClick方法？
问题已经解决，可以在提交
4d2ef0d4fb5c8fe56c76d60eb7274c85bae81d94之前找到。它也是在本期中链接的
回答 1
Stack Overflow用户
发布于 2020-12-29 10:26:44
这是--而不是-- Web组件的限制，这是shadowDOM的工作方式。
片段标识符通过ID引用工作，因此它们只在'main‘DOM中工作，而不是在shadowDOM中(而不是在IFRAMEs中)。
document.querySelector( )也不能访问shadowDOM中的这些is，因为shadowDOM的本质是隔离内容。
所以你要么：
- 不要使用shadowDOM，你真的需要shadowDOM特性吗？
该样式应该是一个全局CSS设置，如果您执行而不是使用shadowDOM，则应用该设置。
- 使用shadowDOM从每个元素注册文档单击监听器，检查片段标识符是否在其shadowDOM范围内。 因为自定义元素可以访问其主机，所以IFRAME无法访问 该事件模型是解耦组件与 shadowDOM的最佳模型。
- 编写一些更复杂的代码，从主DOM
<foot-note>(“脚注”) .forEach(脚注=> footnote.shadowRoot.getElementById(.))调用所有...document.querySelectorAll
您站点中组件的IMHO no 需要shadowDOM；它将使您的设计更容易，因为不再有shadowDOM作用域CSS，一切都将是全局CSS。
W3C网络组件标准有3种不同的技术
- 模板
- 自定义元素API
- shadowDOM
每一种都可以使用，而不用！
https://stackoverflow.com/questions/65483678
复制相似问题
腾讯云开发者
