我如何 select 全部按名称插入？

Question

我正在处理这种情况...

<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 查询同时影响事物 1 和事物 2 但排除事物 3？

Answer 1

在 Shadow DOM <style> 标签中，您可以将 CSS 样式直接应用于 <slot> 元素，正如@admcfajn 在其第二条评论中所建议的：

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

但是如果你想通过 <slot> 元素插入阴影 DOM 中的光 DOM 中的元素，你应该使用 ::slotted( ) 伪元素函数.

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

将 <div> 内属性为 slot="name".

的文本涂成红色

重要提示：首选第二种解决方案，因为DOM中的CSS优先。因此，从 light 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>

Answer 2

Supersharp 的补充他的回答：

You can style slotted content with global CSS

div 元素（光照DOM）具有slot 属性是主要DOM[= 的一部分22=]

应用于这些元素的全局 样式are/maintain 应用当在阴影内开槽时DOM

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 处于光照状态DOM 但未开槽，因为它没有匹配的槽名
所有其他 lightDOM 内容（特别注意 HR）被注入 unnamed 槽

我如何 select 全部按名称插入？

How do I select all slotted by name?

css

custom-component

web-component

slot

shadow-dom

备注