clavpeleugramincler.netlify.com

Shift the emphasis from component developer to component consumer

by Joe Honton

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. Templates and slots let us create reusable components that we can use in Web Components. The template element does not show up during render so we can put them anywhere and use them as we wish in any Web Component. This website is operated by MT SecureTrade Limited ('us', 'our', 'we' Web Components Slots or the 'Company'), a company incorporated under the laws of Malta with registration number C56545 and registered address at @GIGBeach Triq id-Dragunara, St. Julians, STJ Web Components Slots 3148, Malta. Web Components are generally available in all of the major browsers with the exception of Microsoft Edge and Internet Explorer 11, but polyfills exist to fill in those gaps. Referring to any of these as Web Components is technically accurate because the term itself is a bit overloaded.

The HTML <slot> tag shifts the emphasis from component developer to component consumer by allowing anyone to add fresh content to a standard web component.

Lightning Web Components Slots

Custom elements and templates

A custom element is a standards-based technology that allows a software developer to extend HTML's basic set of tags. It is used together with other standards-based technologies to create a web component which is independent of any proprietary framework such as React, Vue or Angular.

Everything here is future-proofed, designed and approved by the World Wide Web Consortium (W3C).

As a starting point, consider a document that has a structure such as this:

In order to legitimize this, the developer must inform the browser about the new tag name, and tell it what JavaScript class is going to define its behavior. That's done with a statement like this:

The new my-component tag becomes shorthand for a hierarchy of elements that the component developer specifies. Initially that hierarchy is inaccessible to the document DOM — it's wrapped in an HTML <template> and kept on the sidelines, until needed by the browser.

For discussion purposes, I'll declare a template that could be used with a web component that mimics a dialog box with caption, inner content and footer.

The slot element

Web Components Dynamic Slots

Let's not get bogged down in the details of what the MyComponent JavaScript class does, or how the web component life cycle works. We'll leave that discussion for elsewhere, see The 7 Facets of Well-Designed Web Components.

Instead, let's concentrate on the template we've created, changing it to make the heading and text generic. The objective is to let the consumer, the application developer who uses the component, decide what to put in there. This is where the <slot> tag come into play. Here's the same template but with a slot, ready to accept elements from the consumer:

Slottable and slotted

To use this new component, the consumer adds elements in between the opening and closing custom element tag name, like this:

The h2 and p elements specified by the consumer in this example are referred to as slottable elements.

When the browser renders the document, it composes the template and the slottable elements into an internal hierarchy that looks like this:

In the composed hierarchy, the heading and paragraph obtained from the consumer are said to be slotted elements.

Named slots

Web Components Slots

As we can see, the component is now a hodge-podge of English and Russian. To clear this up, we'll want to allow the consumer to specify the caption and footer too. This is where named slots comes into play. The component developer should change the template to have three slots, each with a unique name attribute (title, inner, and message).

Here's how the consumer should markup the document with named slots to properly use all three:

The browser composes the document hierarchy to become:

Web Components Slots App

Default slot values

Web Components Slots Free

The component developer could have provided default values for each of the three slots so that consumers aren't forced to provide them. These defaults would be overridden when the document is composed, but only if the consumer has provided slottable elements with matching names. Here is the version with defaults:

Web Components Slots Without Shadow Dom

If the consumer provided the Russian language document markup shown previously, then the composed hierarchy would be exactly as we've already seen. But if the consumer omitted the named slots, the composed hierarchy would look identical to the very first template that we began with.

Web Components Slots Online

We've just made our web component flexible!