В теге 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>