WebComponent Accordion Demo

This demo uses an Accordion web component (wc) to showcase CSS scoping in Web Components.
The Accordion wc uses generic css class selector names, .title, .panel, and .panel-content that don't interfere
with same selectors on the page. Styles in wc are encapsulated.

The page is can only style Accordion wc if it exposes the styles to be stylable. It demonstrates the behavior with the following use cases:

  1. Accordion styles don't leak out into the page
  2. Page styles can't style Accordion directly
  3. Page use var() to style Accordion wc
  4. Page styles its content that is inserted into Accordion via <slot>

The demo uses the two following CSS properties in the Accordion header to highlight the behavior:

Demo:

Accordion styles don't leak out into the page
Page content
Both content use the same css class name selector: .panel-content. Their styles don't interfere. Accordion styles are encapsulated inside the component.
Page styles can't style Accordion directly
Page content
Page tries to use a css selector, accordion-section .panel-content, on accordion content, but it wouldn't take effect.
 Page use var() to style Accordion wc
Page content
Using CSS custom properties, var(), Accordion exposes color and background-color, to be overridable. Pages sets these properties to match that of the page.
 Page styles its content that is inserted into Accordion via <slot>
Page content
Page content is inserted in Accordion but the page has full control in styling its appearance.