Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to cover CSS in Shadow DOM/Web components". In daily operation, I believe many people have doubts about how to cover CSS in Shadow DOM/Web components. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to cover CSS in Shadow DOM/Web components". Next, please follow the editor to study!

Create a HTML element

We will use the JavaScript class that extends the base HTML Element to create a custom HTML element. Then we will call customElements.define () with the name of the tag to be created and the class we just created.

Class AppCard extends HTMLElement {...} window.customElements.define ('app-card', AppCard)

In this example, we will create this simple Material Design card, which will be displayed when we add this element to HTML:.

First, we create the Shadow DOM root, and then assign the HTML and CSS strings to the innerHTML of Shadow DOM root, as shown below.

Class AppCard extends HTMLElement {constructor () {super (); const shadowRoot = this.attachShadow ({mode: 'open'}); shadowRoot [XSS _ clean] = `.card {background-color: # fff;...} Card title `;} window.customElements.define (' app-card', AppCard)

Overlay attempt

In this example, we want to modify the background color of the card. If it is a simple div element in HTML, you can override the card class or access the div element through the CSS selector. However, the following attempts will not work:

/ / access the div app-card > div {background-color: # 2196F3;} / / override card class app-card > .card {background-color: # 2196F3;}

Use CSS Custom Properties

To solve this problem, we can use the CSS custom property (CSS variable). You can use the CSS custom attribute defined in CSS to change some CSS attributes in custom elements.

In our example, we will use the variable card-bg on the attribute background-color to get who is using the color defined by the custom element.

Class AppCard extends HTMLElement {constructor () {super (); const shadowRoot = this.attachShadow ({mode: 'open'}); shadowRoot [XSS _ clean] = `.card {background-color: var (--card-bg, # fff);.} Card title ` }} window.customElements.define ('app-card', AppCard)

Now we will use the app-card custom element and create the card-bg variable in the CSS of the Body element, and we will assign the hexadecimal color # 2196F3 to the variable.

Body {--card-bg: # 2196F3;}

At this point, the study on "how to overwrite CSS in Shadow DOM/Web components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.