Используйте CSS селекторы, такие как: первый ребенок внутри теневого дома - PullRequest
Новая
       42

Используйте CSS селекторы, такие как: первый ребенок внутри теневого дома

0 голосов
/ 15 апреля 2020

Есть ли способ использовать css селекторы, такие как: first-child,: not (: last-child) внутри shadow dom?

Пример подобен этому

CustomElement. html

<div id="parent-div>
 <slot></slot>
</div>

Приложение. html

<div>
 <custom-element>
   <div class="heading">Main Heading</div>
   <div class="item">item 1</div>
   <div class="item">item 1</div>
   <div class="item">item 1</div>
   <div class="heading">Second Heading</div>
   <div class="item">item 1</div>
   <div class="item">item 1</div>
   <div class="item">item 1</div>
 </custom-element>
</div>

Я хочу найти первый элемент .heading и добавить в него пользовательские стили. Поскольку <div class=heading"> на самом деле является компонентом, я не могу добавить к нему пользовательский стиль, считая его только первым заголовком.

PS: - Я использую angular -элементы, если это помогает

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Я нашел обходной путь для этого в JS way .

Для каждого слота у нас есть EventHandler, который называется (slotchange). Используя это, мы можем получить событие DOM для слота при каждом изменении слота. Как это (HTML) 

<custom-element (slotchange)="onSlotChanged($event)"></custom-element>

JS

onSlotChanged($event) {
 console.log($event) // Go and research yourself about this event, you'll find many things usefull.
 $event.target.assignedNodes() // This will give you the array of every elements, that are in side of the shadow dom
 // Example usage, adding the margin-bottom to only first time (css :firsh-child)
 $event.target.assignedNodes()[0].shadowRoot.getElementById('some-id').style.marginBottom = '10px'
}

Если вам нужно только добавить свойство к элементу, вам не нужно запрашивать shadowDom как " node.shadow Root». Но если вы хотите получить доступ к элементу внутри тени Root этого элемента, вы должны использовать этот

0 голосов
/ 16 апреля 2020

Тот же самый ответ, который я дал в вашем вопросе вчера

Слот-контент не перемещен в shadowDOM,

it остается (невидимым) в lightDOM

и ОТРАЖАЕТСЯ в shadowDOM <SLOT>

Так что стилизация SLOTTED выполняется в CSS область, в которой находится <custom-element>.

или ::slotted( x )

Из документов :

:: slotted может только возьмите составной селектор (в скобках). Причина этого ограничения заключается в том, чтобы сделать дружественный по отношению к стилю движок селектором с точки зрения производительности.

Итак, с вашей структурой вы можете делать: 

 ::slotted(.heading) { }
or
 ::slotted(:first-child) { }

, но не: 

 ::slotted(.heading:first-child)

Поскольку это сложный селектор, а не (простой) составной селектор

Таким образом, ваши заголовки могут быть стилизованы в глобальном CSS и будут REFLECT к слот-контенту: 

my-element div.heading{
  background:blue;
  color:white;
}

Если вы хотите инкапсулировать этот стиль, вам нужно обернуть все в (другой) компонент

Вы можете настроить таргетинг на all Неименованный слот-контент : 

    ::slotted(:not([slot])){
      font-weight:bold;
    }

Вот еще один JSFiddle для игры со стилевым слотом:

https://jsfiddle.net/CustomElementsExamples/aLezyh35/

...