The benefit of web components is their re-usability: you can create a UI widget once, and reuse it multiple times. While you do need JavaScript to create web components, you don't need a JavaScript library. HTML and the associated APIs provide everything you need.
The Web Component standard is made up of three parts—HTML templates, Custom Elements, and the Shadow DOM. Combined, they enable building customized, self-contained (encapsulated), reusable elements that can be seamlessly integrated into existing applications, like all the other HTML elements we've already covered.
In this section, we'll create the
We'll discuss using the and slot attribute, and JavaScript to create a template with
an encapsulated Shadow DOM. We'll then re-use the defined element, customizing a section of text, just
like you would any element or web component. We'll also briefly discuss using CSS from within and outside of the custom element.
The
The element is used to declare fragments of HTML to be cloned and inserted into the DOM with JavaScript. The contents of the element are not rendered by default. Rather, they are instantiated using JavaScript.
As the contents of a element are not written to the screen, the and its contents aren't rendered.
Yes, this Codepen is blank, but if you inspect the HTML tab, you'll see the markup.
In this example, the is not a child of a in the DOM. Rather, contents of elements are children
of a DocumentFragment returned by the HTMLTemplateElement.content
property. To be made visible, JavaScript must be used to grab the contents and append those contents to the DOM.
This brief JavaScript did not create a custom element. Rather, this example has appended the contents of the into the .
The content has become part of the visible, styleable DOM.
Requiring JavaScript to implement a template for just one star rating isn't very useful, but creating a web component for a repeatedly used, customizable star rating widget is useful.
The
We include a slot to include a customized per occurrence legend. HTML provides a that, if provided a name, creates a "named slot". A named slot can be used
to customize content within a web component. The
In our template, we change the to a
The name attribute is used to assign slots to other elements if the element has a slot attribute whose value matches the
name of a named slot. If the custom element doesn't have a match for a slot, the contents of the with generic content that is OK to be rendered if anyone simply includes
Is this text visible?
The slot attribute is a global attribute that is used
to replace the contents of the . In our custom element, the element with the slot attribute
is a . It doesn't need to be. In our template,
Undefined elements
In our we used a , the
Note that the and contents are not rendered. The is a known element that contains content that
is not to be rendered. The in the third instead.
Let's define our element to convert this unrecognized element into a custom element.
Custom elements
JavaScript is required to define custom elements. When defined, the contents of the slot attribute value matches the
Content within a custom element that isn't associated with a slot—the Is this text visible?
We define the custom element named star-rating
by extending the HTMLElement:
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
Now that the element is defined, every time the browser encounters a #star-rating-template, which is our template. The browser will attach a shadow DOM tree to the node, appending
a clone of the template contents to that shadow DOM.
Note that the elements upon which you can attachShadow() are limited.
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(starRating.cloneNode(true));
If you take a look at the developer tools, you'll note the from the is part of the shadow root of each custom element.
A clone of the contents is apparent in each custom element in the developer tools and visible in the browser, but the contents
of the custom element itself are not rendered to the screen.
In the example, we appended the template contents to the document body, adding the content to the regular DOM.
In the customElements definition, we used the same
appendChild(), but the cloned template contents were appended to an
encapsulated shadow DOM.
Notice how the stars went back to being unstyled radio buttons? Being part of a shadow DOM rather than the standard DOM, the styling within Codepen's CSS tab does not apply. That tab's CSS styles are scoped to the document, not to the shadow DOM, so the styles aren't applied. We have to create encapsulated styles to style our encapsulated Shadow DOM content.
Shadow DOM
The Shadow DOM scopes CSS styles to each shadow tree, isolating it from the rest of the document. This means external CSS doesn't apply to your component, and component styles have no effect on the rest of the document, unless we intentionally direct them to.
Because we have appended the contents to a shadow DOM, we can include a While web components are encapsulated with in- It is possible, but not simple, to style the document from within a shadow DOM and to style the contents of a shadow DOM from
the global styles. The shadow boundary, where the shadow DOM ends and the regular DOM begins, can be traversed, but only
very intentionally. The shadow tree is the DOM tree inside the shadow DOM. The shadow root is the root node of the shadow tree. The The To target a shadow DOM from CSS in the global scope, the template needs to be edited. The If our template markup began as such: We could target the Part names act similarly to classes: an element can have multiple space-separated part names, and multiple elements can
have the same part name. Google has a fantastic checklist for creating custom elements. You may also want to learn
about declarative shadow DOMs. Test your knowledge of template, slot, and shadow. By default styles from outside the shadow DOM will style elements inside. Which answer is a correct description of the
markup and CSS styles are scoped to the shadow DOM and hidden
from everything outside of the components, the slot content which gets rendered, the Styling outside of the current scope
:host pseudo-class selects the :host().
This will select only the shadow host elements that match the parameter passed, like a class or attribute selector. To select
all the custom elements, you can use star-rating { /* styles */ } in the global CSS, or :host(:not(#nonExistantId)) in the template styles. In terms
of specificity, the global CSS wins.::slotted() pseudo-element crosses the shadow DOM boundary
from within the shadow DOM. It selects a slotted element if it matches the selector. In our example, ::slotted(legend) matches our three legends.part
attribute can be added to any element that you want to style. Then use the ::part() pseudo-element
to match elements within a shadow tree that match the parameter passed. The anchor or originating element for the pseudo-element is
the host, or custom element name, in this case star-rating. The parameter is the value of the part attribute.
and with:star-rating::part(formPart) { /* styles */ }
star-rating::part(fieldsetPart) { /* styles */ }
Check your understanding
element?