Родственные элементы теневого корня исчезают при вызове attachShadow ()

Question

Родственные элементы теневого корня исчезают при вызове attachShadow ()

1

Когда я вызываю host.attachShadow({mode: 'open'}) на div, содержащем несколько элементов внутри, содержимое div, по-видимому, исчезает. Элементы все еще видны из devtools, но больше не видны на экране.

Не имеет значения, если я запишу shadowRoot чем-нибудь; как только тень привязана, дети-дети исчезают.

Демо на codepen: https://codepen.io/anon/pen/VrBdOe

Почему содержимое исчезает? Я видел это на сайтах, поэтому я знаю, что это возможно. См., Например, код https://www.polymer-project.org/2.0/start/quick-tour, узел <pw-shell> имеет теневой корень и несколько родственных братьев. Что там происходит?

qwerty 26 нояб. 2017, в 21:25

Источник

Теги:

javascript

html5

polymer

shadow-dom

1 ответ

Ещё вопросы

Supersharp · Accepted Answer · 2017-11-26T19-23-00.000Z

Содержимое Shadow DOM заменит исходное поддерево DOM хоста, на котором он прикреплен (теневой корень). Это ожидаемое поведение Shadow DOM (отсюда и это имя).

Вы можете сделать это, используя элемент в Shadow DOM.

host.attachShadow( { mode: 'open' } )
    .innerHTML = 'Original DOM: <slot></slot>, in the Shadow DOM'

<div id=host>
Lite DOM
</div>

Вы должны прочитать руководство по Shadow DOM для получения дополнительной информации.

Да. Используя оригинальный кодер qwerty, добавьте `<slot> </ slot> в конец строки innerHTML: codepen.io/johnthad/pen/WXKKwy