html - 如何使用 <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>

如何选择我想要的所有元素，无论它们是否嵌套？
可选择哪些元素有限制吗？

Answer 1

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

如解释here在关于 shadow dom 101 的 HTML5Rocks 文章中:

Note: select can only select elements which are immediate children of the host node. That is, you cannot select descendants (e.g.select="table tr").

因此，实现的内容选择器仅针对直接子元素，而不是嵌套元素。