找不到 CSS 选择器来设置 Shadow DOM 委托焦点的样式

Question

编辑1+

好吧，抱歉，徒劳无功。这似乎是一个直接的 CSS 问题。在光 DOM 中：-

#disTick::part(endo) {
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); */
    background: linear-gradient(to top, #165273 0%, #33a1de 100%);
}   
#disTick::part(endo):hover, /* We overrode the Tick box-shadow above so now must also control highlighting. */
#disTick::part(endo):focus {
    box-shadow: 0 0 0.2em black;
}

#disTick::part(endo)

的盒子阴影被

#disTick::part(endo):hover

覆盖，但不被

#disTick::part(endo):focus

覆盖

IOW，如果我注释掉第一条规则，那么焦点规则就可以正常工作。

这怎么可能呢？

编辑1-

我已将 delegatesFocus 属性添加到我的自定义元素的 Shadow DOM 中，例如：-

    this.#shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });

它看起来确实有效，因为您可以在我的“禁用切换”复选框上看到传统的大纲焦点样式。

现在我想使用 CSS 关闭默认轮廓并添加我自己的焦点样式。为此，我将以下内容添加到 test_toggle.html :-

#disTick:focus {
    outline: none;
    box-shadow: 0 0 0.2em black;
}

问题是，它没有做任何事情:-(

正如你所看到的，#disTick 是主机（我认为），我已经在 Shadow 和 Light DOM 周围添加了 CSS，但无法让它生效。

请告知我需要什么 CSS 选择器来查找已委托给 Focus 的元素。

Answer 1

selector::part():focus()

有效。例如

#disTick::part(endo):focus {
  outline: 5px solid yellow
}

但是目标元素必须是可聚焦的。这里 endo 是

<span>

。

您可以通过添加

tabindex

属性使其可聚焦。

在自定义元素定义中：

span.tabindex = 1

然后，在发生

click

事件时，致电

focus()