Zjistěte, zda je Element webovou komponentou

Zastával jsem webové komponenty ještě předtím, než se staly specifikací, většinou inspirované rámcem dijit Dojo Toolkit. Posílení prvotřídních widgetů JavaScriptu, na rozdíl od změti DIV a šablon, vždy dávalo největší smysl. Nyní, když existují webové komponenty a jsou na nich založeny úžasné frameworky jako Ionic, chtěl jsem zjistit, jak detekovat webovou komponentu, na rozdíl od běžného HTML elementu, pomocí JavaScriptu. Jak se ukazuje, je to mnohem jednodušší, než si myslíte.

Za předpokladu, že máte odkaz na prvek, je to stejně snadné jako zjištění pomlčky ve značce prvku:

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

Specifikace webové komponenty vyžaduje pomlčku v HTMLElement 's tagName , takže detekce webové komponenty je v podstatě přibitá k porovnání řetězců.

Pokud jste si nehráli s webovými komponentami, opravdu doufám, že si najdete čas. Po desetiletích „widgetů“ a nadměrného vnořování libovolných DIV a nečitelného kódu jsem se naučil tyto skvosty oceňovat!