In the example above, we define a Custom Element containing a property called myObj. To pass an object to a property you first need to select your element

let el = document.querySelector('my-el')

and then assign a value, in this case a standard object, using the dot notation

el.myObj = {a: 'test'}

That’s it.

You can test it by yourself

Why people are still confused about that?

The issue is that most developers talk about ‘properties’ when they actually mean ‘attributes’. The two can be related to each other, for example I can reflect properties to attributes but this isn’t needed all the time.

With attributes you can pass only strings or use them as a boolean value. In the latter case, an attribute returns true if it exists, false if not.

To be clear, in the following example att === true.

<my-component att="false"></my-component>

Is it misleading or not ergonomic? You can have your own opinion about that but this is how HTML always worked. From my point of view, this is consistent.

Is Custom Elements’ API bad?

Some people are complaining about the verbosity of the Custom Elements API and they think that is totally useless and bad designed.

The verbosity part here is true. Take the Codepen example and imagine you have ten properties instead of one. You’ll end up with ten getter and ten setter, in most cases they differ just for the name of the property but they do the same thing for each of them.

This is not convenient for sure, on the other hand, I don’t think this means the API is bad.

This is a low-level API and isn’t always handy to use it directly, but you can build on top of that. You don’t have to develop an entire framework or library, you can just write some abstractions. If you don't feel like to do your own abstraction, try hyperHTML-Element or lit-element they are great!

That said, if you are still comparing Web Components against React, Vue, Polymer, whatever-framework, you’re missing the point and, honestly, is not fair.

Web Components work everywhere

This statement is unfortunately not quite accurate. Is true that this is the big promise of Web Components, but things don’t always work seamlessly.

If you want to learn more about interoperability between Web Components, libraries and frameworks, I strongly suggest you to take a look at Custom Element Everywhere by Rob Dodson. You will find out where they work, where they don't and the potential fixes.

So, are Web Components a thing?

From my point of view yes, absolutely. Maybe they are not for you (yet), but this doesn’t mean they are bad or useless.

I think this is a good moment to start playing with Custom Elements and Shadow DOM. Getting to know Web Components in depth maybe will be useful to change your mind in case you are still skeptical about this standard.

If you are interested in this topic and you want to stay in touch, follow me on Twitter.