Web Component Shadow DOM

Explanations and examples of the use of Shadow DOM, the Web Components standard that helps us to create DOM elements encapsulated in other page elements.

Of all the specifications in the , the W3C standard for developing fully reusable and modular components, Shadow DOM offers us the most important mechanisms for making modules truly self-contained and independent of other page elements. In short, Shadow DOM allows elements to be inserted inside the DOM of the page, but without exposing them to the outside, so that they cannot be accidentally touched.

When often it needs to generate new elements, such as buttons, text fields, icons, paragraphs, which it will place below its hierarchy. All those elements that the custom element creates can be said to belong directly to it. The custom element that owns its elements may or may not hide them so that they cannot be accessed from outside. If it is decided to hide or encapsulate those elements, the Shadow DOM will be used. In this case, the elements will be physically in the DOM of the page, depending solely on the custom element that generated them, and they can only be manipulated by their owner.

Basically, this DOM hidden from other page elements is what allows us to isolate the components, producing the desired encapsulation. The basic benefit is that, by using a custom element on the page, its encapsulated content will not be able to interact with other elements outside, avoiding collateral damage: Above all, other page elements will not be able to break the style or behavior of the custom element that used the Shadow DOM.

Note: Perhaps you have ever experienced the unpleasant situation where inserting a jQuery plugin breaks styles on your page. Or the component doesn’t work because other parts of your code interact with it, or other CSS styles you had declared globally. This is all fixed in the Web Components and a lot depends directly on the Shadow DOM specification.

Create Shadow DOM with Javascript

Now we are going to create some basic examples in which we will use the Shadow DOM specification so that, through Javascript, we can create and inject new elements into the DOM of the page, but allowing them to be hidden.

Note: Like other Web Components specifications, we can use Shadow DOM without the need to use it in conjunction with other specifications such as Custom Elements. However, the truth is that it makes special sense and usefulness when we use several of the specifications together. For this reason, the following example has mainly didactic value, but it does not fully illustrate its most common use. We’ll see examples using the Shadow DOM together with other specifications later, and in this article in the last example we’ll mix the Template specification and the Shadow DOM specification.

To understand the example we have placed several comments. However, we explain it again. First we have a page element to which we have placed an identifier, only to be able to refer to it later: id=”elem”.

Then we access that element using Javascript:

var elem = document.querySelector(“#elem”);

Later, when we have already decided that we want to use the Shadow DOM, we have to produce a root where any element that is going to be encapsulated will be inserted. This root is known as “Shadow Root” and is generated with the following instruction:

var shadow = elem.createShadowRoot();

Finally we have to add new elements within the Shadow Root and we can do that through various mechanisms. An example would be editing its innerHTML property.

shadow.innerHTML = “

This goes to the shadow DOM

“;

That paragraph cannot be touched from the outside. So, if you look, in the header we had a style that would apply to all the paragraphs on the page, and yet, when push comes to shove, it’s not affecting the paragraph that we’ve placed inside the Shadow Root.

Note: As you can see in this example, we insist again, it is not necessary to include any type of additional library for the browser to understand the Shadow DOM. However, for now this will only work in Chrome and Opera, which are the fastest to comply with the standard. Of course, if you use the corresponding polyfill you can see the example working in other browsers as well. About the Polyfill we will also talk in detail in future articles, although we also have some interesting notes to contribute later.

::shadow CSS pseudo element for access to the Shadow DOM

Obviously, sometimes it’s nice to be able to bypass the rule and style elements inside the shadow DOM. For this we have a selector called ::shadow. It is actually a pseudo element that is used by preceding the selector that we want to apply within a Shadow Root node.

For the previous paragraph to be affected by the CSS we would have to use ::shadow as follows.

This is a useful feature, although you should note that the ::shadow pseudo element has been marked as “depretated” (it will be deprecated and therefore will not be supported in future browsers). However, although this pseudo-element serves to bypass encapsulation, we understand that it is quite interesting, so we would expect the use of a similar alternative to be allowed to cover this foreseeable need.

Polyfill and Shadow DOM

Perhaps the most difficult part to simulate using a polyfill, as far as web components are concerned, is the Shadow DOM. For this reason, support for this W3C specification in “polyfilled browsers” is not complete.

Therefore, even if the browser shows on the page those elements that have been placed inside a Shadow Root, this encapsulation will not really exist and they can be touched from the outside, or their appearance can be altered with globally defined CSS.

This reason also makes libraries like Polymer touch the Shadow DOM, at least for now, in a special way, not providing all the advantages it would have a priori in browsers that don’t support it natively. This is done to avoid negatively affecting the performance of applications with Web Components and so that the behavior is different in browsers that implement them natively and those that do not.

Shadow DOM that we import from a template

Before we finish, let’s see how to alter our example a bit so that we can use a template, whose content is to be inserted as a Shadow DOM. Remember that .

The difference is very little, I simply have to access the template and clone that part that I want to use inside the Sadow DOM of another element.

Then that clone of the template is the one that I add to the Shadow Root with the appendChild() method.

//create the shadow root var shadow = elem.createShadowRoot(); //add the template clone shadow.appendChild(clone);