Walking by the shadow

Long long ago I created the Boom. A simple web component. And back then I made a promise to continue to the isolated web component. So here it is.

Everything that we see is a shadow cast by that which we do not see.

Martin Luther King, Jr.

The why?

Let’s create a new simple web component that will allow us to click some words to Google translate:

It’s simple and works. The only problem is that since our web component is a part of the document, It uses all the document CSS. But what if we don’t want the span border?

The how

This is why we can create an isolated shadow element. This way our element will still inherit all the parent layout, but will not activate the CSS selectors and events.

As you can see, the t-t translator element doesn’t have the page span border, and the jQuery selector will not change the text into dots. Isolated, hidden in the shadows, alone and sad. But works like a charm 🙂

Sad but true update: (29/09/2020)

Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers. Remember how exciting it was every time we got new shiny HTML elements that actually do stuff? Remember how exciting it was to be able to do sliders, color pickers, dialogs, disclosure widgets straight in the HTML, without having to include any widget libraries?

…

… I just wanted something that is small and works like a normal HTML element. Yet, it proved so hard I ended up writing my own!

The failed promise of Web Components By Lea Verou