4. 4
    Allow External Styling of a Web Component's Shadow DOM
    4m 51s

Allow External Styling of a Web Component's Shadow DOM

InstructorYonatan Kra

Share this video with your friends

Send Tweet

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.

Dean
Dean
~ 6 years ago

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

Yonatan Kra
Yonatan Kra(instructor)
~ 6 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?