css - 如何按名称选择所有插槽？

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> 将一个元素插入到 Shadow DOM 中时将其作为目标。元素，你应该使用 ::slotted( ) 伪元素函数。

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

将 <div> 内的文本涂成红色具有 slot="name" 属性.

重要提示:首选第二种解决方案，因为来自轻量级 DOM 的 CSS 具有优先权。因此，从 light DOM 继承的样式将覆盖来自插槽元素的样式。请参阅 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>