JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

This is a list of web components lessons showing the technologies behind it and some practical ways to use it now in production.

Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes.

You'll learn how to create a Custom Web Element (that extends `HTMLElement`) that renders text to the browser and respond to a click event listener.

Render Hello World Text with Custom Elements

HTMLTemplates are part of the web components specification.  In this lesson we will learn what are HTML templates, how to use them and how to use the powerful HTMLTemplates slots inside a web component.

html

Build Flexible HTML with HTMLTemplates using Slots and Web Components

Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the component.
In this lesson you will learn how to setup a shadow DOM and see the CSS encapsulation in action.

Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

The Shadow DOM protects your components from style conflicts. The same protection also makes it hard for users to modify the inner style for their own needs. In this lesson we go over 3 ways to define API for a controlled manipulation of encapsulated styles.

Allow External Styling of a Web Component's Shadow DOM

In this lesson, you will learn how to create an explicit API using methods on the web component itself.

Web components explicit API's using class methods

In this lesson you will learn how to use custom events to expose internal events from withing a web component.

Using Custom Events as a web component API

The part pseudo class allows consumers of a web component to manipulate certain key elements inside the Shadow DOM.  In this lesson we will explore two use cases to using the part pseudo class.

Enabling CSS manipulation inside the shadow DOM using the part pseudo class

Web Components

https://app.egghead.io/api/v1/lessons/javascript-render-hello-world-text-with-custom-elements/subtitles

Instructor: [00:01] In order to create a custom element, we need to create a class. Inside our HDML file, we'll create a script tag. Inside we'll define a class. We'll call it, "My custom element." We'll make sure it extends HTML element. Inside its constructor, we'll call the super method, which makes sure we inherit everything from HTML element.

[00:22] We'll define the click event and set up a call-back that fires an alert. Now we can define a connected call-back, which fires when the custom element is connected to the dome. Here, it is safe to do dome manipulations like inner HTML. This is a good place to set up our custom elements template.

[00:43] The second thing we need to do is to define the custom elements, so window.customelements.define. We pass the custom tag name and the class we've just created. The final thing we need to do is to actually use the tag inside our dome. We set it up, refresh the page, and here is our custom element. We click it and we see that our click is registered.

[01:05] This is how we create a custom element.

https://app.egghead.io/api/v1/lessons/javascript-render-hello-world-text-with-custom-elements/transcript

https://app.egghead.io/api/v1/lessons/html-5-build-flexible-html-with-htmltemplates-using-slots-and-web-components/transcript

https://app.egghead.io/api/v1/lessons/html-5-avoiding-css-conflicts-via-shadow-dom-css-encapsulation/subtitles

Instructor: [00:01] Shadow DOM is used inside custom elements, so we will define one now. We'll start by adding a template with a div, add the class text to the div, and inside, add a slot named content. Let's add our script now, with a reference to the template.

[00:24] The final custom element, we'll call it custom element. Inside its constructor, we use the elements attachShadow method, with mode open as a parameter in order to instantiate the shadow root.

[00:40] This shadow root can be used now as an HTML element. We just append the template's content clone inside, we define the element, we use the element in the DOM, we add a slotted paragraph. We refresh, and we see the element is rendered. In order to see the Shadow DOM style encapsulation, let's add style to our template, and see the change.

[01:09] Now, let's add a simple div with the same class. We'll refresh, and we see that it's loaded with no styling. Most apps have global style, so let's add that now. Just copy the template style. To make things interesting, let's make the global style more specific.

[01:37] Let's change things to add color, underline, and bigger font, refresh, and we see that the div outside the shadow has the global style.

https://app.egghead.io/api/v1/lessons/html-5-avoiding-css-conflicts-via-shadow-dom-css-encapsulation/transcript

https://app.egghead.io/api/v1/lessons/html-5-allow-external-styling-of-a-web-component-s-shadow-dom/subtitles

Instructor: [00:00] Let's look at our setup here. We have a web component that renders our template into shadow DOM. Inside its template, there's a style definition of blue and underline text and a div with the class text and the string "In the Shadow." We also have a div outside the web component with the same class and the text "Outside the shadow."

[00:22] Finally, we have a global style that applies red and underline text to a div with the class text. In the browser to the right, we can see the text "In the Shadow" with an encapsulated style as well as the red text of the div outside the web component.

[00:36] Knowing CSS, we might think that adding a very specific selector would enable us to change the style. We add a selector that's specific to our web component and set the color definition to purple. We refresh and see that nothing changed. Our web component's content is encapsulated by the shadow DOM.

[00:56] Let's remove the non-working selector and see three ways of allowing external change of an encapsulated style.

[01:02] We first can add a method, changeStyle. It accepts a styles object. We get a reference to the text div. Now we can iterate over the styles object and replace the element styles inside. We refresh, select our element in the Console. We can see we have the new method on the element itself.

[01:39] Now we can use the method by passing an object with a color property. See? The color has changed. We can do the same with textDecoration and see we had the wanted effect. This can be applied to any valid style property.

[01:58] Web components also enables us to expose declarative APIs on element's attributes. We first need to define the attributes we wish to observe using the static getter observedAttributes. It returns an array of attributes to observe, in our case the color and text-decoration.

[02:19] We can now use the attributeChangedCallback hook that fires when an observed attribute has changed. It accepts the attribute's name, the oldValue, and the newValue. Inside, we can use the changeStyle method with the input.

[02:37] We refresh and go to the Elements inspector. We can now define the color attribute with some value on the element itself and see it has changed. We can do the same for text-decoration and see it has changed as well. Since we hook into the element's attributeChanged detection, we can also use the native setAttribute method. We set the attribute color to purple, and we see it has changed.

[03:17] So far, we've used JavaScript in order to allow styles changes inside the shadow DOM. The next way to allow that is via CSS using CSS variables.

[03:30] Inside our component's template, we use the CSS var function instead of the actual value. We pass the variable's name. We need to define the variable in the global style. In order for the variable to apply to the web component, we need to define it under the component selector. We just set the value we would like to apply.

[03:56] When we refresh the page, we see the color is now purple as in the variable defined in the global style. If we remove the variable's definition, we'll see it will default to the browser default, in this case, black text. In order to avoid that, we can define a default color as the second parameter to the var function. We refresh, and we see we have the blue text as default.

[04:21] To summarize, we've seen three ways to allow penetration of our shadow DOM. We've created a method on the element itself that accepts a styles object and applies them to the element. We've also created a declarative API by observing certain element attributes with the observedAttributes static getter and the attributeChangedCallback hook.

[04:41] Finally, we saw how to define CSS variables in the global style and apply them in a component style with the default fallback.

https://app.egghead.io/api/v1/lessons/html-5-allow-external-styling-of-a-web-component-s-shadow-dom/transcript

https://app.egghead.io/api/v1/lessons/javascript-web-components-explicit-api-s-using-class-methods/subtitles

Instructor: [00:01] We'll start by creating a simple custom element. It's a class that extends HTML element. We'll add some HTML [inaudible] . We'll define the custom element on the window and use it in our HTML page. Refresh the page and see our [inaudible].

[00:21] What we'd like to do now is create an API to change the text and its color. One way to do that is to add functions to the component. I'll add the function changeTextColor() that accepts the color. As a best practice, I will save a reference to the header, and use this reference in our method to change the header's text color.

[00:45] Next I will create a changeText() method. It accepts the text and changes the header's inner text. We can refresh the page and get a reference to our custom element. We can now call the method on the element to use our new API. I'll use the changeText method to change the text to "Hello Egghead." In the same way, we can use the method to change the text color.

[01:11] To summarize, we've created a web component with some HTML. We've added two methods to the component itself. We got a reference, using querySelector(), to our custom element, and used the methods on the element to change the text and the color. You can create as many methods as you want to create more sophisticated APIs.

https://app.egghead.io/api/v1/lessons/javascript-web-components-explicit-api-s-using-class-methods/transcript

https://app.egghead.io/api/v1/lessons/javascript-using-custom-events-as-a-web-component-api/transcript

https://app.egghead.io/api/v1/lessons/javascript-enabling-css-manipulation-inside-the-shadow-dom-using-the-part-pseudo-class/subtitles

Yonatan Kra: [0:00] Part is a CSS pseudo class that enables us to set styles to elements inside the Shadow DOM. Let's see it in action. This is a web component that shows cards for our employees. In the template, we set up some styles, and we set up the cards, and each card has a part attribute with the name card.

[0:23] In the constructor itself, we just create the Shadow DOM, append our template's content to the Shadow DOM and create a list of the cards from the card elements. In the connected callback, the web component fires an event cardSelection when a card is clicked, so for every card, create an EventListener for click and onClick will create an event and [inaudible] dispatch it.

[0:53] Right now, in the external application using this component, we can set the card styles using the part pseudo class. We head on to the app style. We can use employees-custom-element::part(card).

[1:14] We can set the style, so we can change the background for instance, set it to read, and the background is changed. It's changed into something more modern. Now we have a card that we can change its color from the external application.

[1:33] Note that we cannot change the style of the card's children directly, so this will not work. Let's just copy it here. If I'll try to set up this card with edge 4 and do font size 72px, nothing happens. It can only affect the styles of the card itself. While this is a nice way to enable style changes, it can also be used to dynamically change styles.

[2:04] Let's look at toggle selected method in our component. The toggle selected method accepts a card index, finds the right card, gets the part attribute value. If there is no selected, we just append the selected to the part value. If there is, we remove the selected from the part value.

[2:31] Right now, nothing happens, but if you go to the external application style and just copy that, we'll change this to selected and change that to red and now we get selected state.

[2:53] To summarize, parts allow web component developers to allow consumers to style certain key elements inside a Shadow DOM. We saw it can be done statically by setting a part value beforehand as well as dynamically by adding and removing values from the part's attribute string.

https://app.egghead.io/api/v1/lessons/javascript-enabling-css-manipulation-inside-the-shadow-dom-using-the-part-pseudo-class/transcript

Web Components

Yonatan Kra

Free Community Resource

What you'll learn:

Free Community Resource

Course Content