Render Hello World Text with Custom Elements

Build Flexible HTML with HTMLTemplates using Slots and Web Components

Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

Allow External Styling of a Web Component's Shadow DOM

Web components explicit API's using class methods

Using Custom Events as a web component API

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

Web Components

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.

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.

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

Share this video with your friends

Course

Web Components