adopted stylesheets / CSS Modules

[thescientist13]

As part of #7 , was playing around with what CSS Modules could look like, and ended up creating an demo around adopted stylesheets.

.heading {
  color: red;
}

import styles from './hero.css';

export default class Hero extends HTMLElement {
  connectedCallback() {
    document.adoptedStyleSheets.push(styles);

    this.innerHTML = `
      <h2 class="heading">Hello from Hero banner</h2>
    `
  }
}

customElements.define('app-hero', Hero);

Not sure what we can do with it, but seemed interesting to at least put a PR together. 🤓

(currently the plugin isn't doing anything)

---

TODO

1. Not sure why the CSS import works to produce CSSStyleSheet instance? Maybe an ES Modules Shims thing?

[netlify]

❌ Deploy Preview for super-tapioca-5987ce failed.

Name	Link
🔨 Latest commit	65ff816
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/6546c64bd1bd760008824d34

[thescientist13]

I think #11 and #13 are better demonstrations, so closing this one.