Question

我应该首先说我并不是真的有一个我试图解决的问题。关于Shadow Dom和CSS3 :target选择器如何/应该/当前一起工作，我有一个有趣的想法。

我知道HTML规范说在有效的HTML文档中只应该有一个具有特定ID值的元素。但是当我们开始使用带阴影dom的web组件时，我们很容易发现自己使用具有相同ID的多个元素。当我们在同一页面中多次使用相同的组件时尤其如此。所以我的问题是：影子dom区域内的元素会发生什么，其ID值与当前哈希匹配，并且使用:target规则设置样式？

例如，如果我写了一个包含

的webcomponent（my-element）

<style>
#debug {display:none}
#debug:target { display:block; background-color:yellow; border 2px solid red; }
</style>
<div id="debug">some debug data</div>

我放在页面上并导航到#debug的my-element实例应该怎么办？每个组件中的调试元素是否应该显示？他们都不应该表现出来吗？应该只显示第一个元素的调试div（我希望浏览器尝试导航到同一个）？

我的观点是，如果页面没有ID=debug值的元素，则页面上不应出现滚动导航。由于影子dom与页面其他部分的样式是隔离的，浏览器不应该尝试导航到嵌套在影子dom中的这样一个元素。每个my-element实例应该能够看到当前页面的URL，并且应该应用任何匹配的：目标规则，这样每个my-elements＆＃39; debug div应该是可见的。

如果是这种情况，它将为在所有组件之间共享页面状态提供一些有趣的可能性，例如上面的调试示例。但是，我怀疑Chrome目前是如何实现的。而且我非常确定Shadow Dom polyfill不能正确处理事情，因为它基本上会把所有东西都塞进页面的Dom树中，这会打破html规范。

只是好奇是否有人能够解答这应该如何运作以及今天如何运作......

（从我的电脑编辑添加格式......我的手机很难做到）

Answer 1

我认为您可以将阴影DOM看作嵌套文档。 CSS无法从外部处理影子DOM内的元素（以前存在的影子穿孔CSS选择器已弃用）。这也封装了id，因此包含id的元素的多个组件不会导致冲突或重复。

如果你的组件样式中有:target选择器的CSS，它应该能够使用匹配的id来寻址元素，否则它不应该。

Answer 2

<块引用>

所以我的问题是：元素应该发生什么在具有与 ID 值匹配的 shadow dom 区域内当前散列，哪个样式带有 :target 规则？

添加到 answer 上方的 Günter Zöchbauer 的另一种方法是在封装样式时使用 Custom Element 对象，如果样式是全局的，它就可以正常工作。使用 define 方法创建自定义组件，如文档中所示。这不会封装您的元素，因此请注意您的样式可以跨文件共享。

所以不要这样做：

const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild(pTag)

使用这个：

this.appendChild(pTag);

前面的两个示例都假设您在 HTMLElement 类或继承它的类中。

Shadow Dom和CSS3：目标选择器

2 个答案: