javascript - 自定义 HTML 元素不会切换 CSS 焦点伪类

Question

我正在使用标签库进行标签输入（称为 tagify）。该库创建了一个名为的自定义 html 元素tags，它从用于创建Tagifyjavascript 对象的原始文本输入继承类，然后将其隐藏。在里面tags，它创建了一个简单div的input内部。

在此之前，我使用的是引导类form-control，它具有一种聚焦的蓝色辉光/阴影。我希望tags它具有焦点效果，并且它确实具有引导类，因为它是由 Tagify 添加的。但是，这种聚焦效果永远不会发生。

实际上，当您单击它时，实际上是在单击input元素，因此我在焦点上安装了一个事件侦听器，它调用tags焦点。这不起作用（JSFiddle）。自定义 html 元素不是“可聚焦”的吗？有没有办法将这种效果添加到tags元素中？

编辑：如果我在浏览器的开发人员选项中手动检查 :focus 复选框，它会满足我的需要。另外，我只想要效果，它不是强制使用焦点类，但我确实需要它与提供的完全相同，form-control即使 Bootstrap 决定将来更改它。

EDIT2：有没有办法获取焦点伪类的css，然后使用javascript将这些规则添加到新类中？然后专注于input我会将该类添加到tags.

标签： javascripthtmlcssbootstrap-4