Как выбрать вложенные элементы с помощью <content select = "">
В 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>
Как я могу выбрать все элементы, которые я хочу, независимо от того, вложены они или нет?
Есть ли ограничение в отношении того, какие элементы выбираются?
3 ответа
Это не ошибка в реализации тега содержимого, это действительно так.
Как объясняется здесь, в статье HTML5Rocks о теневом DOM 101:
Примечание: select может выбирать только те элементы, которые являются непосредственными дочерними элементами узла узла. То есть вы не можете выбирать потомков (egselect="table tr").
Поэтому селекторы контента при реализации нацелены только на непосредственные дочерние элементы, а не на вложенные элементы.
Это может быть ошибка в Chrome, вы также пробовали это в Firefox с включенным флагом веб-компонентов?
Что еще более важно, этот метод выбора элементов уходит в пользу метода "именованных слотов". Я пока не знаю, попал ли он в какие-либо браузеры. Это может не стоить больших проблем, чтобы решить эту проблему.
Я думаю, это потому, что один из тегов привязки не является прямым потомком элемента div, в котором он находится.