How to select nested elements using <content select = "">
In Chrome 44, I'm trying to create a shadow DOM that displays a specific set of shadow node children.
In the following code, the part <content select="a">
selects only two of the three items <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>
How can I select all the elements I want, whether they are nested or not?
Is there a limitation on what items can be selected?
source to share
This is not a bug in the implementation of the content tag, this is really how it works.
As explained here in the HTML5Rocks article on Shadow House 101:
Note. select can only select elements that are direct children of the host node. That is, you cannot select descendants (eg select = "table tr").
Therefore, implementation content selectors are only for immediate children, not nested elements.
source to share
It might be a bug with Chrome, have you also tried it in Firefox with the web components flag enabled?
More importantly, this method of selecting items is moving away in favor of the "named slots" method. However, I don't know if it hit all browsers. You might not need to worry about fixing this problem.
source to share