如何按名称选择所有插槽？答案

【问题标题】：How do I select all slotted by name?如何按名称选择所有插槽？
【发布时间】：2020-01-15 03:25:50
【问题描述】：

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

<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？

【问题讨论】：

[slot="thing"]{ border: 2px dashed #f00; } Attribute selectors
那么事情会像:head[slot="thing"] 给定shadow dom吗？
我不确定 web 组件的实现...我以为您只是在寻找 css-selector...slot[name="thing"] 也许？
我发现对 Web 组件有用的东西：在 CSS 外部 :defined、[slot=...]，以及对于组件内部的 CSS，:host、::slotted()、@ 987654331@.
对不起，主持人

标签： css web-component custom-component shadow-dom slot

【解决方案1】：

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

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

但是，如果您想在通过 <slot> 元素将 light DOM 中的元素插入到 Shadow DOM 时将其作为目标，则应使用 ::slotted() 伪元素函数。

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

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

重要提示：首选第二种解决方案，因为来自 light 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>

【讨论】：

【解决方案2】：

Supersharp 答案的附录：

您可以使用 global CSS
为 slotted 内容设置样式

div 元素（在 lightDOM 中）具有 slot 属性是主 DOM 的一部分

全局应用于这些元素的样式是/保持应用在 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）都被注入到 unnamed 槽中

【讨论】：