Vision for HTML Modules in Greenwood

hero.css

:host {
  text-align: center;
  margin-bottom: 40px;
}

:host h2 {
  font-size: 3em;
}

hero.html

<div class="hero">
  <h2>This is a really nice website!/h2>
</div>

hero.js

// this vision aims to support the separation of concerns / technologies use case for Web Components
import sheet from './hero.css' with { type: "css" };
import template from "./hero.html" with { type: "html" };

export default class HeroBanner extends HTMLElement {
  connectedCallback() {
    if(!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      
      // with DOM Parts?
      // template.replace('some-binding', 'some value');

      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.shadowRoot.adoptedStyleSheets = [sheet];
    }
  }
}

customElements.define('app-hero', HeroBanner)