Как выбрать все слоты по имени? - PullRequest
Новая
       20

Как выбрать все слоты по имени?

4 голосов
/ 15 января 2020

Я имею дело с этой ситуацией ... 

<template>
  <slot name="thing"></slot>
  <slot name="other"></slot>
</template>

и реализацией типа 

<custom-element>
  <div slot="thing"> Thing 1 </div>
  <div slot="thing"> Thing 2 </div>
  <div slot="other"> Thing 3 </div>
</custom-element>

Как использовать запрос CSS, чтобы повлиять как на Thing 1, так и на Thing 2 но исключая вещь 3?

Ответы [ 2 ]

2 голосов
/ 15 января 2020

В теге Shadow DOM <style> вы можете применять стили CSS непосредственно к элементу <slot>, так как @admcfajn предложено во втором комментарии: 

slot[name="thing"] { .. }

Но если вы хотите настроить таргетинг элемент из светлого DOM, когда он вставляется в Shadow DOM через элемент <slot>, следует использовать функцию псевдоэлемента ::slotted(). 

::slotted( div[slot="thing"] ) { color: green }

закрасит текст внутри красного цвета <div> с атрибутом slot="name".

Важное замечание: предпочтительнее второе решение, поскольку CSS из облегченного DOM имеет приоритет. Поэтому стиль, унаследованный от легкого DOM, переопределит стиль от элемента slot. См. Пример с background-color ниже: 

customElements.define( 'custom-element', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow( { mode: 'open' } ).innerHTML = tpl.innerHTML
  }
} )
body { background-color: lightblue }
<template id=tpl>
  <style>
    ::slotted( [slot=thing] ) { background-color: green }
    slot[name="other"] { background-color: red }
  </style>
  <slot name="thing"></slot>
  <slot name="other"></slot>
</template>

<custom-element>
  <div slot="thing"> <div>Thing 1 </div></div>
  <div slot="thing"> Thing 2 </div>
  <div slot="other"> Thing 3 </div>
</custom-element>
0 голосов
/ 15 января 2020

Дополнение к Supersharp его ответ:

Вы можете стиль слот контент с global CSS

* Элементы 1011 *

div (в lightDOM) с атрибутом slot являются частью основных стилей DOM

Global , применяемых к этим элементам. / поддерживать применяется когда прорезано внутри shadowDOM 

customElements.define( 'custom-element', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow( { mode: 'open' } )
        .innerHTML=`<slot name="thing"></slot>`
                  +`<slot name="other"></slot>`
                  +`<slot></slot>`
  }})
[slot] { background-color: lightblue }
<style id=GlobalStyle>
  [slot]:not([slot="other"]){
    background:green;
  }
</style>

<button onclick=GlobalStyle.disabled=!GlobalStyle.disabled>
TOGGLE GlobalStyle
</button>

<custom-element>
  <div slot="thing"> Thing 1 </div>
  <HR>
  <div slot="thing"> Thing 2 </div>
  <div slot="other"> Thing 3 </div>
  <div slot="none" > Thing 4 </div>
  <b>
    <div> Thing 5 </div>
  </b>
  <div slot="thing"> Thing 6 </div>
</custom-element>

Примечания

  • Thing 6 прорезано перед Thing 3, поскольку слот thing определен перед слотом other
  • Thing 4 находится в lightDOM, но не имеет слотов, потому что у него нет соответствующего имени слота
  • Весь другой контент lightDOM (особенно обратите внимание на HR) внедряется в безымянный слот
...