Web Components Slots
Web Components are a collection of standards which are working their way through the W3C. One of these specs is called Custom Elements and gives you the ability to create your own HTML elements. The idea behind this extension is to detect pages that are using it nowadays and show an icon in the address bar when it happens. Web Components, instead of being a single spec, is a collection of several stand-alone Web technologies. Often Web Components will leverage Shadow DOM features. Shadow DOM is commonly used for CSS encapsulation. However, Shadow DOM has another useful feature called Slots. 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. In this article. By Rick Anderson. View or download sample code (how to download). View components. View components are similar to partial views, but they're much more powerful. View components don't use model binding, and only depend on the data provided when calling into. Latest web-components posts Efficient Template Rendering Using lit-html Composing Custom Elements With Slots And Named Slots Styling Your Custom Elements Polyfills and Transpilation for Your Custom Elements all web-components posts.
Shift the emphasis from component developer to component consumer
by Joe HontonThe HTML <slot> tag shifts the emphasis from component developer to component consumer by allowing anyone to add fresh content to a standard web component.
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
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
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:
Default slot values
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:
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.
We've just made our web component flexible!
Now that we went over some of the basic concepts of Web Components and Custom Elements, let’s push our exploration a little bit further and discuss attributes and properties.
This post discusses the Custom Elements V1 spec.
We’ll start with a few important concepts about attributes and properties in the DOM:
Properties vs Attributes
The difference between properties and attributes can be confusing. Properties are available on a DOM node when being manipulated by JavaScript:
And attributes are provided in the HTML itself. Here alt, width and height are all attributes:
Attributes should only be used for scalar values like strings, numbers and boolean values. Properties, on the other hand, are perfectly suited to also hold values that are objects or arrays.
Reflecting Properties to Attributes
Most properties reflect their values as attributes, meaning that if the property is changed using JavaScript, the corresponding attribute is also changed at the same time to reflect the new value. This is useful for accessibility and to allow CSS selectors to work as intended.
You can try it out yourself for a concrete example. Just select, say, an image element in your browser’s developer tools, and then change one of its properties:
Notice how the with attribute in the DOM representation is automatically changed to the new value. The same is true if you change the value for the attribute manually in the DOM inspector, you’ll see that the property will now hold the new value.
Reflecting properties to attributes in Custom Elements
Your own Custom Elements should also follow this practice of reflecting properties to attributes. Luckily, it’s quite easy to do using getters and setters.
Web Components Slots Online
For example, if you have a custom element that has a value property that should be reflected as an attribute, here’s how you would use a getter and a setter to get the value of the attribute when doing property access and setting the new value for the attribute when the property is changed:
Or, if you have a boolean property, like, say hidden:
Listening for Changed Attributes
With Custom Elements, you can listen for attribute changes using the attributeChangedCallback method. This makes it easy to trigger actions when attributes are changed. To help with performance, only attributes defined with an observedAttributes getter that returns an array of observed attribute names will be observed.
The attributeChangedCallback is defined with three parameters, the name of the attribute, the old value and the new value. In this example, we observe the value and max attributes:
Notice also that the observedAttributes getter is a static method on the class. Static methods are often used as utility methods for the class itself because they are unavailable on class instances.
Putting it All Together
Let’s put all these concepts together by building a simple counter element, similar to the one that we build using Stencil.
Our component can be used like this:
Web Components Slots App
Or it can be used with the following attributes:
Here’s the full code for our custom element, with a few interesting parts highlighted:
my-counter.js
Most of the code is pretty straight-forward and uses concepts that we discussed in this article. The highlighted parts may be new however, so here are some quick explanations:
- In the constructor we bind the this for our increment and decrement methods to the this of the class itself. Otherwise, since these two methods are used as callbacks for event handlers on button elements, the this would be the clicked button instead of the Custom Element.
- In the connectedCallback method we set the value attribute to an initial value of 1 if value hasn’t been set by the user of the element.
- We remove our event listeners in the class’ disconnectedCallback method.