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

Question

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

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

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

: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', '')）

我考虑过的替代方案：

当然，我的第一个想法是在填充宿主元素空间的容器元素上封装 shadow DOM 中的属性（甚至切换一个类），但问题是溢出的内容，例如轮廓和框-阴影似乎被宿主元素强行隐藏了——这似乎是合乎逻辑的。

我可以在宿主元素上指定一个固定的填充以确保轮廓和阴影的可见性，但这需要考虑不同的浏览器呈现框阴影的行为，并且对于消费者的自定义样式来说会感觉违反直觉。

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

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);
}

并且使用（全局）CSS 为 host 元素设置样式：

  :focus {
    outline: 5px solid green;
  }

完整的解释和操场 JSFiddle
先使用 Chrome/Edge/Opera，然后查看其他人缺乏的行为：
https://jsfiddle.net/CustomElementsExamples/9n6wtgj7/

它有一些关于点击/聚焦/模糊解决方法的指针。

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

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