Feature/issue 49 inner html

[thescientist13]

Related Issue

resolves #49

Summary of Changes

1. Added support for Light DOM (innerHTML) vs Shadow DOM (shadowRoot.innerHTML) rendering
2. Added test case

TODO

1. Does this remove the need for lightMode config (breaking change)? - deprecate lightMode configuration option #52
2. Validate template.cloneNode approach for navigation component in test for browser / standards compliance - DOM shim not accurately creating templates (HTMLTemplateElement) #51
   • looks like I may have it implemented incorrectly per - Feature/issue 49 inner html #50 (comment)
   • need to create a bug issue to track?
3. documentation (maybe better as an example?) - added to Go Live checklist - Go Live checklist #17

[thescientist13]

Yeah, looks like doing this shouldn't work as we have it now

const template = document.createElement('template');

template.innerHTML = `
  <footer>
    <p>
      <a href="https://projectevergreen.github.io">WCC &#9672 Project Evergreen</a>
    </p>
  </footer>
`;

class Footer extends HTMLElement {
  connectedCallback() {
    this.appendChild(template.content.cloneNode(true));
  }
}

export {
  Footer
};

customElements.define('wcc-footer', Footer);

Since based on a quick test in the browser console, the <template> tags should be included

Seems like something to fix in dom-shim.js?

[netlify]

✅ Deploy Preview for merry-caramel-524e61 ready!

Name	Link
🔨 Latest commit	c02c955
🔍 Latest deploy log	https://app.netlify.com/sites/merry-caramel-524e61/deploys/62a32e19c26524000b93c4f1
😎 Deploy Preview	https://deploy-preview-50--merry-caramel-524e61.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.