Как стилизовать потомков элемента, который был вставлен (в таблице стилей тени root)? - PullRequest
Новая
       82

Как стилизовать потомков элемента, который был вставлен (в таблице стилей тени root)?

0 голосов
/ 11 июля 2020

Вот моя попытка, но элементы span не имеют границы deeppink, как я надеюсь (я в Google Chrome 83): 

const d = document.querySelector('div')

const r = d.attachShadow({mode: 'open'})

r.innerHTML = `
  <style>
    /* This doesn't work as I was hoping: */
    ::slotted(p) span {
      border: 1px solid deeppink;
    }
    
    /* This doesn't work (and I wouldn't expect it to), but I tried it anyways: */
    ::slotted(span) {
      border: 1px solid deeppink;
    }
    
    /* This doesn't work either: */
    :host span {
      border: 1px solid deeppink;
    }
    
    /* This works, but not what I'm trying to do. */
    ::slotted(p) {
      background: #f9f9f9
    }
  </style>
  <slot></slot>
`
<div>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
  <p><span>test</span></p>
</div>

Как мы стилизуем потомков распределенных (разделенных) дочерних элементов?

1 Ответ

0 голосов
/ 12 июля 2020
  • содержимое слотов остается в lightDOM, отражается в a
  • :: slotted (*) может нацеливаться только на СКИН lightDOM с простые селекторы

Для длинного ответа см .: :: slotted CSS селектор для вложенных дочерних элементов в слот shadowDOM

Обновление: пример <div SLOT=Hello> содержимое не IN shadowDOM 

<my-element>
  <div slot=Hello>Hello reflected (slotted) lightDOM DIV</div>
</my-element>

<my-element>
  <div slot=NoSlot>Hello not slotted lightDOM DIV</div>
</my-element>

<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: 'open'})
        .innerHTML=`<slot name=Hello><b>I am shadowDOM SLOT content</b></slot>`;
    }
    connectedCallback() {
      console.log(this.shadowRoot.querySelector('slot').innerHTML)
    }
  });
</script>
...