Например, если вы используете веб-компоненты с LitElement, а затем пытаетесь использовать document.querySelector, и он ничего не находит в документе, но вы можете четко видеть это в инструментах разработчика. Очень раздражает, а затем вы ищете «веб-компоненты document.querySelector» и не получаете хороших результатов! ладно, сейчас все супер надоедает!
Причина в том, что веб-компоненты могут использовать новый ShadowDom, который инкапсулирует элементы DOM, которые могут быть присоединены к DOM. На самом деле вам не обязательно использовать ShadowDom, но это скорее правило, чем выброс.
Покажи, как ты задаешься вопросом о теневом мире?
Это сложнее, и вы не можете сделать это так же просто, как раньше, вам придется копать вручную и самостоятельно выбрасывать компоненты.
<div><my-component><button>Hello</button></my-component></div>
Мы хотим получить элемент кнопки.
Мы не можем этого сделать:
document.querySelector('button') // won't work
Нам нужно будет сделать это:
document.querySelector('my-component').shadowRoot.querySelector('button')
Итак, ShadowRoot является корневым для этого компонента, и этот querySelector будет работать внутри этого поддерева.
Я создал здесь пример, который вы можете увидеть:
Https://kevinsimper.github.io/queryselector-web-component/index.html
и исходный код здесь:
