1
Render Hello World Text with Custom Elements
1m 7s
2
Build Flexible HTML with HTMLTemplates using Slots and Web Components
3m 12s
3
Avoiding CSS Conflicts via Shadow DOM CSS encapsulation
1m 50s
4
Allow External Styling of a Web Component's Shadow DOM
4m 51s
5
Web components explicit API's using class methods
1m 32s
6
Using Custom Events as a web component API
1m 49s
7
Enabling CSS manipulation inside the shadow DOM using the part pseudo class
3m 13s

Allow External Styling of a Web Component's Shadow DOM

Yonatan Kra

InstructorYonatan Kra

Share this video with your friends

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.

illustration for Web Components

Course

Web Components

Dean

Dean

~ 5 years ago

Can you tell us a use case in which this would be needed?

Yonatan Kra

Yonatan Krainstructor

~ 5 years ago

Hi Dean. Nice meeting you :) There are several use cases actually. You could use the CSS variables when you'd like to allow customization of widgets according to site themes for instance. Let's say you have some web component with an input, and the site's inputs backgrounds are with a certain background color or border or shadow. You could use the API's (a method or the attributes) in order to allow a dynamic change of certain attributes. For instance, allow a user to select the color of a text inside a web component from the outside, or show a background color for a modal window according to some user defined variable. Does that answer your question?