HTML Accordion Demo

This demo uses an Accordion component to showcase scoping styles with HTML and CSS classes.
It demonstrates the behavior with the three use cases:

  1. Accordion styles don't leak out into the page
  2. Page styles overriding Accordion styles
  3. Styling content, inserted into Accordion, with page styles

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

Demo:

page content
page content
background-color and color properties are encapsulated inside the the Accordion component.
page content
background-color and color are overridden by the page styles.
new page content
content inserted into Accordion styles by page.



References:

This demo adapts the Accordion component from https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html