Polymer 阴影Dom和CSS3：目标选择器

首先，我应该说我并没有一个我正在努力解决的问题。我刚刚有一个有趣的想法，关于ShadowDOM和CSS3

：target

选择器如何协同工作

我知道HTML规范说在一个有效的HTML文档中应该只有一个元素具有特定的ID值。但是，当我们开始在ShadowDOM中使用webcomponents时，我们很容易发现自己使用了具有相同ID的多个元素。当我们在同一页面中多次使用同一组件时，情况尤其如此。所以我的问题是：在一个阴影dom区域中，如果元素的ID值与当前哈希匹配，并且使用

：target

规则设置样式，那么该元素会发生什么情况

例如，如果我编写了一个webcomponent（我的元素），其中包含

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

#调试{显示：无}
#调试：目标{显示：块；背景色：黄色；边框2px纯红色；}
一些调试数据

我放在页面上并导航到#debug on的元素的所有实例会发生什么情况？每个组件中的调试元素是否应显示？他们都不应该出现吗？是否应该只显示第一个元素的debug div（我希望浏览器尝试并导航到的同一个）

我的观点是，如果页面没有具有

ID=debug

值的元素，则页面上不应出现滚动导航。由于shadowdom与页面的其他样式是隔离的，浏览器不应该尝试导航到shadowdom中嵌套的元素。每个my element实例都应该能够看到当前页面的URL，并且应该应用任何匹配的：目标规则，这样每个my element的调试div都应该是可见的

如果是这样的话，那么就有可能在所有组件之间共享页面状态，比如上面的调试示例。然而，我怀疑Chrome目前是如何实现的。我很确定这个影子dompolyfill不能正确处理事情，因为它基本上把所有东西都塞进了页面的Dom树中，这会破坏html规范

我只是好奇，如果有人知道这应该如何运作，以及它今天是如何运作的

---

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

我想你可以看到像嵌套文档一样的阴影DOM。CSS无法从外部寻址阴影DOM内部的元素（以前存在的阴影穿透CSS选择器已被弃用）。 这还封装了id，因此包含id元素的多个组件不会导致冲突或重复

如果在components样式中有带有

：target

选择器的CSS，那么它应该能够使用匹配的id对元素进行寻址，否则就不应该

所以我的问题是：元素会发生什么 在阴影dom区域内，该区域的ID值与 当前哈希值，哪个是使用：目标规则设置样式的

除了上面的Günter Zöchbauer之外，还有一种替代方法，就是在封装样式时使用对象，如果样式是全局的，那么它就可以正常工作。使用该方法创建自定义组件，如文档中所示。这不会封装您的元素，因此请注意，您的样式可以跨文件共享

因此，与其这样做，不如：

const shadow=this.attachShadow（{mode:“open”}）；
影子儿童（pTag）

使用以下命令：

this.appendChild（pTag）；

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