将 :focus CSS 应用于 shadowDOM 中的输入字段并将 :focus CSS 应用于影子主机

Question

我目前正在开发一个自定义元素，它基本上是输入元素的略微增强版本，将其所有构建块（包括输入元素）托管在阴影中 DOM。

当内部输入元素获得焦点时，宿主元素应使用彩色轮廓和框阴影设置样式，如下所示：

因此，输入的焦点和模糊事件处理程序在宿主元素上切换属性 "focussed"，封装样式如下所示：

:host([focussed]) {
    transition: outline 0.3s ease-in-out;
    outline-color: var(--focus-color, var(--default-focus-color)) !important;
    box-shadow: 0px 0px 3px var(--focus-color, var(--default-focus-color)) !important;
}

我不喜欢这种方法的地方：

在主机上暴露一个需要观察的自定义属性，以保证视觉呈现状态的正确性（例如消费者调用setAttribute('focussed', '')）

我考虑的备选方案：

当然，我的第一个想法是将属性封装在容器元素的阴影 DOM 中（甚至切换 class），填充宿主元素的 space , 但问题是 outline 和 box-shadow 等溢出的内容似乎被宿主元素强行隐藏了——这似乎有点合乎逻辑。

我可以在宿主元素上规定一个固定的内边距以确保轮廓和阴影的可见性，但这需要考虑不同的浏览器渲染框阴影行为，并且对于消费者的自定义样式会感觉有违直觉.

我正在这里寻找最佳实践方法，非常感谢您对此的有教养的想法。

Answer 1

this.attachShadow({
      mode: 'open',
      delegatesFocus: true
    })

适用于 Chrome、Edge、Opera，但不适用于其他（尚）

这会为输入（在 shadowDOM 中）本身设置样式：

:focus {
  transition: outline 1s ease-in-out;
  outline: 2px solid var(--focus-color,blue);
  box-shadow: 10px 0px 10px var(--focus-shadow-color,red);
}

And 使用（全局）CSS:

为 host 元素设置样式

  :focus {
    outline: 5px solid green;
  }

完整的解释和游乐场 JSFiddle
先用Chrome/Edge/Opera，再看别人的不足:
https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

它提供了一些 click/focus/blur 解决方法的指示。

对于 FireFox、Safari 支持，我会添加一些不太花哨的东西，可以很容易地删除。

目前我还不清楚 Mozilla 和 Apple 的时间框架是什么，
也许 Supersharp 知道

将 :focus CSS 应用于 shadowDOM 中的输入字段并将 :focus CSS 应用于影子主机

Applying :focus CSS to input-field in shadowDOM and :focus CSS to shadow host

html

javascript

css

web-component

custom-element