javascript - 正在申请:focus CSS to input-field in shadowDOM and :focus CSS to shadow host

Question

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

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

因此，输入的焦点和模糊事件处理程序在宿主元素上切换属性“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 中(甚至切换类)，但问题是溢出的内容，例如轮廓和框 -阴影似乎被宿主元素强制隐藏 - 这似乎是合乎逻辑的。

我可以在主机元素上指定固定的填充，以确保轮廓和阴影的可见性，但这需要考虑 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);
}

并使用(全局)CSS 设置 host 元素的样式:

  :focus {
    outline: 5px solid green;
  }

完整解释和 JSFiddle Playground
首先使用 Chrome/Edge/Opera，然后再查看其他人的缺乏行为:
https://jsfiddle.net/WebComponents/Lpqyg201/

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

对于 FireFox 和 Safari 支持，我会添加一些不太花哨但可以轻松删除的内容。

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