medium-on-styling-web-components-2.js

// Create style node outside of WebComponent
const style = document.createElement('style');

style.innerHTML = `
  p { color: blue; }
`;

class FancyComponent extends HTMLElement {

  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    shadowRoot.innerHTML = `
      <div>
        <p>Hello World</p>
      </div>
    `;

    // Let us try to optimize
    // Deep cloning of style node
    const clonedStyle = style.cloneNode(true);

    shadowRoot.appendChild(clonedStyle);
  }
}