CSS shadow dom: есть ли альтернатива / глубокий селектор? - PullRequest
Новая
       5

CSS shadow dom: есть ли альтернатива / глубокий селектор?

0 голосов
/ 25 июня 2018

Насколько я знаю, переключатель / deep не рекомендуется использовать для выбора дочерних элементов shadow dom.Поэтому я ищу другое решение.

CSS scoping ищет решения для восходящего селектора, но не для нисходящего.

Учитывая этот dom: 

<script>
    $('.child').addClass('reached');
</script>
<div id="parent">
    #shadow-root
        <div class="child"></div>
    /shadow-root
</div>

Как я могу написать селектор в скрипте для доступа к элементу .child?

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 26 июня 2018

Как написать селектор в скрипте для достижения элемента .child?

Чтобы достичь элемента в Shadow DOM, вы должны использовать свойство shadowRoot вэлемент. 

var parent = document.querySelector( '#parent' )
var child = parent.shadowRoot.querySelector( '#child' )
child.classList.add( 'reached' )

Примечание: Shadow DOM должен быть создан в открытом режиме. 

var sh = parent.attachShadow( { mode: 'open' } )


var parent = document.querySelector( '#parent' )
var sh = parent.attachShadow( { mode: 'open' } )
sh.innerHTML = `<style>
                    div.reached { color: green }
                </style>
                <div id="child">Child</div>
                `
var child = parent.shadowRoot.querySelector( '#child' )
child.classList.add( 'reached' )
<div id="parent">
</div>

Примечание: ::slotted требуется, только если у вас есть элементы в светлом DOM, раскрытом с <slot>.

Есть ли альтернатива / глубокий селектор?

Короткий ответ - нет.Поскольку Shadow DOM нацелен на изоляцию Shadom DOM от главной страницы, /deep была своего рода ересью.

A очень новое предложение , с ::part и ::theme псевдо-элементы могут вернуть некоторый контроль, но это не будет реализовано в ближайшее время.

До этого времени основным обходным решением является использование пользовательских свойств CSS .

Однако 2 решения должныбыть реализованным конструктором веб-компонентов и не может быть переопределено иначе.

...