v0.16.0

Overview

This release refactors some WCC's DOM shim internals as well as address issues with setting element properties and honoring the mode option for attachShadow. There was also a breaking change to remove the deprecated getInnerHTML call with getHTML on the Node class in the DOM shim.

Changelog

https://github.com/ProjectEvergreen/wcc/issues?q=label%3A0.16.0

1. Replace deprecated method getInnerHTML with getHTML (thank you @DannyMoerkerke 🙌 )
2. refactor DOM shim internals (thank you very much @briangrider 🙌 )
3. Issue Setting Element Properties (thank you @briangrider 🙌 )
4. support configurable shadowrootmode attribute for <template> tags (thank you @briangrider 🙌 )
5. verify / ensure proper serialization of shadow roots excluding closed shadow roots from getInnerHTML getHTML (thank you @briangrider 🙌 )
6. Upgrade parse5 to v7

Breaking Changes

DOM Shim

On the Node class, the getInnerHTML method has been deprecated and replaced with getHTML to align with the spec

// before
import 'wc-compiler/src/dom-shim.js';
import Greeting from './components/greeting.js';

const greeting = new Greeting();
const html = greeting.getInnerHTML({ includeShadowRoots: true });

// after
import 'wc-compiler/src/dom-shim.js';
import Greeting from './components/greeting.js';

const greeting = new Greeting();
const html = greeting.getHTML({ serializableShadowRoots: true });

Shadow Root Templates

Setting innerHTML on a Shadow Root will now automatically insert a <template> tag when using renderToString / renderFromHTML, e.g.

class MyComponent extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <style>
          :root {
            --accent: #367588;
          }
        </style>

        <main>
          <h1>My Website</h1>
        </main>
      `;
    }
  }
}

export default Home;

Known Issues

N / A

Diff

0.15.1...0.16.0