影子DOM内部内容的溢出

Question

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

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

因此，输入的focus和blur事件处理程序会使用以下封装样式在宿主元素上切换属性“ 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中（甚至切换一个类）在容器元素上，以填充宿主元素的空间，但是问题是溢出了内容，例如轮廓和框阴影似乎被宿主元素强行隐藏了-这似乎是合乎逻辑的。

我可以在宿主元素上指定固定的填充，以确保轮廓和阴影的可见性，但这将需要考虑盒形阴影的不同浏览器渲染行为，并且会因消费者的自定义样式而违反直觉。

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

Answer 1

可在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的支持，我会
add

不太容易被删除的东西。

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