是的,element组件库_检测Element是否是Web组件

朴灿烈づ我的快乐病毒、 2023-02-21 15:30 23阅读 0赞

是的,element组件库

I've advocated for web components since before they became a spec, mostly inspired by the Dojo Toolkit's dijit framework. Empowering first class JavaScript widgets, as opposed to a mess of DIVs and templates, always made the most sense. Now that web components exist, and awesome frameworks like Ionic are based on them, I wanted to discover how to detect a web component, as opposed to a regular HTML element, with JavaScript. As it turns out, it's much easier than you'd think.

从Web组件成为规范开始，我就一直在提倡它们，主要是受Dojo Toolkit的dijit框架启发。 赋予一流JavaScript小部件(而不是混乱的DIV和模板)总是最有意义的。 既然Web组件已经存在，并且像Ionic这样的强大框架都基于它们，我想发现如何使用JavaScript检测Web组件，而不是常规HTML元素。 事实证明，它比您想象的要容易得多。

Assuming you have a reference to an element, it's as easy as detecting a dash in the element's tag:

假设您有一个元素的引用，就像检测元素标记中的破折号一样简单：

function isWebComponent(element) {
      return element.tagName.includes("-");
    }

The web component spec requires a dash in the `HTMLElement`'s `tagName`, so detecting a web component is essentially nailed down to a string comparison.

Web组件规范在`HTMLElement`的`tagName`需要使用破折号，因此检测Web组件本质上取决于字符串比较。

If you haven't played with web components, I really hope you find the time. Having lived through decades of "widgets" and over-nesting of arbitrary DIVs and unreadable code, I've learned to appreciate these gems!

如果您还没有使用Web组件，那么我真的希望您能找到时间。 经历了数十年的“小部件”，以及对任意DIV和不可读代码的过度嵌套，我学会了欣赏这些宝石！

> 翻译自: [https://davidwalsh.name/detect-web-component][https_davidwalsh.name_detect-web-component]

是的,element组件库

[https_davidwalsh.name_detect-web-component]: https://davidwalsh.name/detect-web-component