Detect if Element is a Web Component

By  on  

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.

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.

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!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

  • By
    CSS pointer-events

    The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events property is even more JavaScript-like, preventing: click actions from doing...

Discussion

  1. Wouldn’t that just check whether it is a custom element? To my knowledge, custom elements can live on their own and do not have to be actual web components.

    • Šime Vidas

      Could you explain the difference between a custom element and a web component?

    • Jv

      My exact thought, Catalin! This isn’t really robust enough..

  2. Yaisiel

    I feel like that will not work if you declare your web component as a “customized built-in” (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Customized_built-in_elements). That type of component is built on top of an existing element (like a for example) and the tag names don’t contain hyphens. I’m not sure, however, how many people would follow that approach in practice. It might be that, for the majority of the cases, checking for hyphens is enough.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!