Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

Discussion

  1. Catalin Berta

    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!