Полимер: разница между: host и :: content CSS selector

Question

Я пытаюсь применить стиль CSS к локальной DOM элемента Polymer. В частности, я хочу применить стиль только к части <content></content> локальной DOM. Я попробовал следующее определение элемента:

<dom-module id="test-element"> 
    <template> 
    <style> 
     :host > ::content { font-weight: bold; } 
    </style> 

    <div>Local DOM 1</div> 
    <content></content> 
    <div>Local DOM 2</div> 
    </template> 
</dom-module> 

Однако не только содержание стилизовано, но весь элемент, включая тексты «Local DOM N». Я знаю, что я могу использовать обертку <div> элемент вокруг содержимого, чтобы сдержать стилизацию, но мне интересно, какая разница между селектором :host и :host > ::content на самом деле, потому что последнее относится также ко всей локальной DOM.

Answer 1

Как указано в documentation:

Под тенистым DOM, то <content> тег не отображается в дереве DOM. Стили переписаны, чтобы удалить псевдоэлемент ::content, и любой комбинатор сразу слева от::content.

Это означает, что под тенистым DOM нет технически никакой разницы между :host > ::content и :host >