CSS：如何在 Shadow DOM root 中定位 ::slotted 兄弟姐妹？

Question

我知道规范目前只允许 ::slotted 的复合选择器，即 ::slotted(my-first + my-second) 是不允许的，但这样的事情应该有效吗？

::slotted(x-first) + ::slotted(x-second) { /* css */ }

有没有什么方法可以定位槽兄弟（除了全局 css）？如果没有，我应该在哪里提出这样的请求？谢谢

Answer 1

放置在插槽中的

DOM 应该由拥有该 DOM 的 CSS 控制，而不是由自定义元素控制。

Web 组件允许对放置在您的插槽中的 DOM 进行非常小的 CSS 控制。几乎只是顶级元素（以及子节点自动继承的东西。）

这是一个有意识的决定，可能永远不会改变。

Answer 2

当然可以 select siblings of slots / slotted.

你不能做的事情是select一个已经开槽的元素不是顶级节点.

Select 兄弟姐妹：

slot[name=<slotname>] ~ <selector>

Select 槽顶层节点

::slotted(<compound-selector>)

一个compound-selector contains a tag/class/id/name etc. but must not have any combinators。例如 <space>。

.myClass 好的

<anyTag>[<anyAttribute>[=<anyValue>]] 好的

.<myClass> > .<anotherClass> 否

例子

var element = document.querySelector('.templateMe');
var shadow = element.attachShadow({mode: 'open'});
var template = document.querySelector('.myTemplate');
shadow.appendChild(template.content.cloneNode(true));

<template class="myTemplate">
  <style type="text/css">
    ::slotted([slot=slot1]) { /* slot1 every slotted element - YES */
      color: red;
    }
    
    slot[name=slot1] { /* slot1 itself - YES */
      text-decoration: underline;
    }
    
    slot[name=slot1] + .siblingA { /* slot1 siblingA (direct sibling) - YES */
      color: green;
    }
    
    slot[name=slot1]  ~ .siblingB { /* slot1 siblingB (any sibling) - YES */
      color: orange;
    }
    
    slot[name=slot2]::slotted(.selectMeA) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
      color: purple;
    }
    
    slot[name=slot2]::slotted(.selectMeB) { /* slot2 NOT TOP-LEVEL CHILD - NO */
      font-weight: bold;
    }
    
    slot[name=slot2]::slotted(.selectMeC[name=myName]) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
      color: khaki;
    }
    
    slot[name=slot2] + .siblingC { /* slot2 sibling - YES */
      color: blue;
    }
    
  </style>
  <div>
    <slot name="slot1"></slot>
    <div class="siblingA">Sibling A of Slot 1</div>
    <div class="siblingB">Sibling B of Slot 1</div>
  </div>
  <hr/>
  <div>
    <slot name="slot2"></slot>
    <div class="siblingC">Sibling C of Slot 2</div>
  </div>
</template>

<div class='templateMe'>
  <span slot="slot1">Im in Solt 1</span>
  <span slot="slot2" class="selectMeA">
    Im in Solt 2, im selectable.
    <div class='selectMeB'>
      NOT selectable (because no top level node of slotted)!
    </div>
  </span>
  <span slot="slot2" class="selectMeC" name="myName">Im in Solt 2 too and selectable!</span>
</div>

更多here.

slotted elements (coming from light DOM), ::slotted(selector) allows to select slotted elements themselves, but not their children.

CSS：如何在 Shadow DOM root 中定位 ::slotted 兄弟姐妹？

CSS: How to target ::slotted siblings in Shadow DOM root?

css

web-component

shadow-dom

native-web-component