Web Components & Shadow DOM

What is the purpose of the adoptedStyleSheets property?

const sheet = new CSSStyleSheet();
sheet.replaceSync('.my-class { color: blue; }');

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.adoptedStyleSheets = [sheet];
  }
}

To adopt styles from the parent document
To share stylesheet instances between Shadow Roots
adoptedStyleSheets allows: 1) Sharing of constructed stylesheets between Shadow Roots, 2) More efficient style management by reusing stylesheet instances, 3) Dynamic updating of styles across multiple components, 4) Better performance compared to duplicating styles in each component. This is particularly useful for maintaining consistent styles across multiple instances of components.
To override component styles
To remove all existing styles

Next Question (13/20)