Почему цвет, применяемый к телу, влияет на теневой корень - PullRequest
Новая
       7

Почему цвет, применяемый к телу, влияет на теневой корень

0 голосов
/ 21 мая 2018

Вот простой HTML, который у меня есть.h1 находится внутри теневого корня, но он зеленый.Ожидается ли такое поведение наследования цвета от родительских элементов вне теневого DOM?Мне интересно, потому что селекторы элементов не могут пересекать теневые границы (стили h1 не применяются к h1 внутри корня тени) 

<head>
 <style> 
    body { color: green } 
    h1 { color: red; }
 </style>
</head>

<my-element>
  #shadow-root
    <h1>text is green</h1>
</my-element>

В идеале я ищу частьспецификация, которая определяет это поведение.

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Да, такое поведение ожидается.Из spec :

Элементы верхнего уровня теневого дерева наследуются от их хост-элемента.

В вашем случае теневой хост, my-element, наследует цвет от элемента body.h1, находящийся в теневом корне my-element, наследуется от my-element.

0 голосов
/ 21 мая 2018

Существует shadowHost и shadowRoot.

shadowRoot - это то, что прикреплено к элементу для создания теневого DOM.

shadowHost - это то, к чему присоединен этот теневой корень.

Очевидно, что когда вы определяете что-то плоское на html-странице, оно присоединяется к элементу body shadowroot.То же самое, что говорят, что он присоединен к shadowDOM тела или с body как shadowHost.

Я думаю, это поведение по умолчанию, как 'defaultRoot по умолчанию'.Там, где вы пишете «текст зеленый», поскольку предполагается, что тело является корневым элементом для содержимого страницы.В то время как HTML-тег описывает язык документа.И head определяет содержимое метаданных.

Таким образом, зеленый стиль корректно наследуется.

...