Enhance HTML with custom tags and Shadow DOM

In my previous article, I explained the basics of creating custom tags. In fact, custom tags eliminate some of the brittleness when building great web applications. However, the pursuit of control does not stop, and traditional custom tags are not enough to build performance-rich applications. For example, the number of style selectors in your code may increase with the addition of custom tags. This is just one of many factors that can cause performance issues.

One way to solve this problem is through Shadow DOM.

Shadow DOM works by introducing scoped styles. It doesn't require any special naming conventions or tools. With Shadow DOM, bundling CSS with markup is easy. Furthermore, this feature allows us to hide all details about the implementation in plain JavaScript.

Why use Shadow DOM?

Shadow DOM provides the following solutions:

• Allow independent elements in the DOM. Queries such asdocument.querySelectordo not return orphaned elements.
• Allow scoped CSS. Scoped CSS ensures that all style rules remain within the page. It also means simpler CSS selectors without any naming conflicts and many common classes.

Our example

To demonstrate Shadow DOM, we will use a simple component calledtuts-tabs. All references in this article will point to this code. To experience Shadow DOM, take a look at the demo below:

Understanding Shadow DOM

What is Shadow DOM?

Before you start coding with Shadow DOM, you need to understand the regular DOM.

HTML is the backbone of the website. In just a few minutes, you can create a page. When you open the page in your browser, the DOM comes into play. Once the browser loads the page, it starts parsing the HTML into a data model. The data model is a tree structure in which the nodes represent elements in HTML. The data model is easy to modify and manipulate with code.

The disadvantage is that entire web pages and even complex web applications are treated as a single data structure. This is not easy to debug! For example, a CSS style applied to one component may end up affecting another component elsewhere in the application.

You useiframes when you want to isolate part of the interface from the rest. But iframes are heavy and extremely restrictive.

This is why Shadow DOM was introduced. It is a powerful feature of modern browsers that allows web developers to include subtrees of various elements in the DOM. These subtrees of the DOM do not affect the main document tree. Technically, they are calledShadow Trees.

A shadow tree has ashadow root, which is attached to a parent in the DOM. This parent is calledShadow Host.

For example, if you pluginto a browser powered by WebKit, it will be converted into a slider. Why? This is a slider because one of the subtree DOM elements understands "scope" to change its appearance and introduce slider-like functionality. This is an advantage that Shadow DOM brings to tabs.

Wow, that’s a lot of theories. Now, you might want to write some code to see how Shadow DOM is implemented.

Step-by-step guide to using Shadow DOM

Step 1: Create Shadow DOM Element

Useelement.attachShadow()to create a Shadow DOM element.

In our exampletuts-tab, you will see the code used to create a Shadow DOM element.

let shadowRoot = this.attachShadow({mode: 'open'});

Step 2. Add content to Shadow Root

Next, we will use.innerHTMLto add content to the shadow root. Note that this is not the only way to populate the Shadow DOM. There are many APIs that help you populate the Shadow DOM.

shadowRoot.innerHTML = ``

Step 3: Connect custom elements to Shadow DOM

Connecting custom elements to Shadow DOM is very simple. Keep in mind that when you combine custom elements with Shadow DOM, you'll be able to create encapsulated components using CSS, JavaScript, and HTML. Therefore, you will create a completely new web component that can be reused in your application.

In our example, we create a new custom element usingcustomElements.define(). As mentioned in the previous tutorial, new elements should contain "-" in their name.tuts-tabsThe component extendsHTMLElement.

当我们扩展HTMLElement时，在构造函数中调用super()非常重要。另外，构造函数是需要创建shadowRoot的地方。

customElements.define('tuts-tabs', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to . const shadowRoot = this.attachShadow({mode: 'open'}); ... });

创建shadowRoot后，您可以为其创建 CSS 规则。 CSS 规则可以包含在 `; } ... });