如何使用<content select="">选择嵌套元素

Question

在Chrome 44中，我正在尝试创建一个影子DOM，用于渲染影子宿主的特定一组子元素。
在以下代码中，<content select="a">部分仅选择了三个<a>元素中的两个。

<div id=a>
    <a>1</a>
    <span><a>2</a></span>
    <a>3</a>
</div>

<template id=b>
    <content select="a"></content>
</template>

<script>
shRoot = document.getElementById('a').createShadowRoot() ;
shRoot.appendChild( document.importNode(document.getElementById('b').content, true) ) ;
</script>

我该如何选择我想要的所有元素，不论它们是否嵌套？
有什么限制可以选择哪些类型的元素吗？

- GetFree

Answer 1

这不是内容标签实现中的错误，这确实是它的工作原理。

如此处在HTML5Rocks关于影子DOM 101的文章中所解释：

注意：select只能选择主机节点的直接子元素。也就是说，您不能选择后代元素（例如select =“table tr”）。

因此，内容选择器仅通过实现目标直接子元素，而不是嵌套元素。

- Abhinav

Answer 2

我认为这是因为其中一个锚点标签不是您所在的 div 元素的直接子元素。

- Chris

Answer 3

这可能是Chrome的一个bug，您是否也尝试在打开Web组件标志的Firefox中尝试过？

更重要的是，选择元素的这种方法正在被“命名插槽”方法所取代。虽然我不知道它是否已经在任何浏览器中实现，但修复这个问题可能并不值得太多麻烦。

- markg

---

Firefox 给出了相同的结果。令人惊讶的是，这个实验性质的东西正在 Google 的几个项目中使用。 - GetFree