Css Module 46

  Module 46: how to style Web Components using CSS. 

Because Web Components use Shadow DOM, styling is scoped and encapsulated by default. use standard CSS, Shadow DOM CSS scoping, CSS custom properties, and :host selectors effectively. 

1. Introduction to Web Component Styling

      

What is Shadow DOM?

Shadow DOM is a part of the Web Components standard that provides encapsulation for DOM and CSS.

Example:

html

code

<my-card></my-card> <script> class MyCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> p { color: red; } </style> <p>This is inside the Shadow DOM</p> `; } } customElements.define('my-card', MyCard); </script>

Explanation:

The <p> inside the Shadow DOM is red.

Styles defined inside the shadow root don't affect outside elements, and vice versa.

2. Styling Encapsulated Elements

:host Selector

Use :host to target the custom element itself from within its Shadow DOM.

css

 code

:host { display: block; background-color: #f0f0f0; padding: 1rem; }

Usage Example:

javascript

code

shadow.innerHTML = ` <style> :host { border: 2px solid black; } </style> <div>Content inside</div> `;

Explanation:

:host styles the outer custom element (<my-card>) from inside.

:host([attribute])

Target the host based on attributes.

css

code

:host([highlight]) { border: 2px solid gold; }

3. Styling Slotted Content

Use the ::slotted() selector to style content projected with <slot>.

                         

Example:

html

code

<my-card> <p slot="description">This is slotted content.</p> </my-card>

javascript

Copy code

shadow.innerHTML = ` <style> ::slotted(p) { font-style: italic; } </style> <slot name="description"></slot> `;

Explanation:

::slotted(p) only targets slotted <p> elements.

Cannot style nested elements inside slots—only the top-level slotted node.

4. Using CSS Custom Properties (Variables)

CSS custom properties allow users to override component styles from outside.

Component Definition:

css

 code

:host { --main-color: blue; } p { color: var(--main-color); }

Outside Usage:

html

 code

<my-card style="--main-color: green;"></my-card>

Explanation:

The color inside the shadow DOM becomes green.

Allows for theming and customization.

5. Style Inheritance and Global Styles

Global styles do not penetrate the shadow DOM.

How to Enable Some Styling Inheritance:

Inherit font-family, color, etc., using inherit keyword.

css

code

p { font-family: inherit; color: inherit; }

6. Advanced – Exposing Parts with ::part and part Attributes

Inside the component:

     

       

html

 code

<div part="title">Title</div>

Outside component:

css

 code

my-card::part(title) { font-weight: bold; color: navy; }

Explanation:

Allows external styles to apply to internal parts via part and ::part.

7. Practical Exercises

Exercise 1: Basic Styling Inside Shadow DOM

Create a <fancy-button> Web Component that uses a Shadow DOM and styles its internal <button> element.

html

 code

<fancy-button></fancy-button>

js

 code

class FancyButton extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> button { background: #6200ea; color: white; padding: 0.5em 1em; border: none; border-radius: 4px; } </style> <button><slot></slot></button> `; } } customElements.define('fancy-button', FancyButton);

Goal:

Students customize the button’s styles using ::part and CSS variables.

Exercise 2: Host Styling with Attributes

Create a <tooltip-box> Web Component that changes background color if the attribute highlight is present.

       

        

html

 code

<tooltip-box highlight>Info</tooltip-box>

Expected:

Use :host([highlight]) to change style.

Exercise 3: Theming with CSS Variables

Create a reusable <theme-card> component that uses CSS variables for --card-bg and --text-color.

html

code

<theme-card style="--card-bg: #333; --text-color: #eee;">Dark Themed</theme-card>

Inside Shadow DOM:

css

 code

:host { background: var(--card-bg, white); color: var(--text-color, black); }

8. Summary of Key Points

Concept

Description

Shadow DOM

Encapsulates styles inside components

:host

Styles the custom element from within

::slotted

Targets slotted elements from outside

CSS Variables

Allows external theming and customization

::part and part

Enables styling internal parts externally

9. Suggested Flow

 (15–20 min):

Show browser dev tools to inspect Shadow DOM and styles.

Live Demo (10 min):

Build a basic Web Component with Shadow DOM.

Show styling with :host, ::slotted, and CSS variables.

Hands-On  (20–30 min):

Challenge: Create a theme-switchable component.

Q&A and Recap (10 min)

10. Assessment Suggestions

Mini Project: Build a styled profile-card Web Component using Shadow DOM and customizable with CSS variables.

Quiz: Identify how and when to use :host, ::slotted, and ::part.

Code Review: Share styled components for peer review.