feat: add support for "declarative shadow dom"

Author: keithamus

src/auto-shadow-root.ts

@@ -0,0 +1,11 @@
+export function autoShadowRoot(element: HTMLElement): void {
+  for (const template of element.querySelectorAll<HTMLTemplateElement>('template[data-shadowroot]')) {
+    if (template.parentElement === element) {
+      element
+        .attachShadow({
+          mode: template.getAttribute('data-shadowroot') === 'closed' ? 'closed' : 'open'
+        })
+        .appendChild(template.content.cloneNode(true))
+    }
+  }
+}

src/controller.ts

@@ -1,5 +1,6 @@
 import {register} from './register'
 import {bind} from './bind'
+import {autoShadowRoot} from './auto-shadow-root'
 import {wrap} from './wrap'
 
 interface CustomElement {
@@ -15,6 +16,7 @@ interface CustomElement {
 export function controller(classObject: CustomElement): void {
   wrap(classObject.prototype, 'connectedCallback', function (this: HTMLElement) {
     this.toggleAttribute('data-catalyst', true)
+    autoShadowRoot(this)
     bind(this)
   })
   register(classObject)

test/auto-shadow-root.js

@@ -0,0 +1,88 @@
+import {autoShadowRoot} from '../lib/auto-shadow-root.js'
+
+describe('autoShadowRoot', () => {
+  window.customElements.define('autoshadowroot-test-element', class extends HTMLElement {})
+
+  let root
+
+  beforeEach(() => {
+    root = document.createElement('div')
+    document.body.appendChild(root)
+  })
+
+  afterEach(() => {
+    root.remove()
+  })
+
+  it('automatically declares shadowroot for elements with `template[data-shadowroot]` children', () => {
+    const instance = document.createElement('shadowroot-test-element')
+    const template = document.createElement('template')
+    template.innerHTML = 'Hello World'
+    template.setAttribute('data-shadowroot', 'open')
+    instance.appendChild(template)
+
+    autoShadowRoot(instance)
+
+    expect(instance).to.have.property('shadowRoot').not.equal(null)
+    expect(instance.shadowRoot.textContent).to.equal('Hello World')
+  })
+
+  it('does not attach shadowroot without a template`data-shadowroot` child', () => {
+    const instance = document.createElement('shadowroot-test-element')
+    const template = document.createElement('template')
+    template.setAttribute('data-notshadowroot', 'open')
+    const otherTemplate = document.createElement('div')
+    otherTemplate.setAttribute('data-shadowroot', 'open')
+    instance.appendChild(template, otherTemplate)
+
+    autoShadowRoot(instance)
+
+    expect(instance).to.have.property('shadowRoot').equal(null)
+  })
+
+  it('does not attach shadowroots which are not direct children of the element', () => {
+    const instance = document.createElement('shadowroot-test-element')
+    const div = document.createElement('div')
+    const template = document.createElement('template')
+    template.setAttribute('data-notshadowroot', 'open')
+    div.appendChild(template)
+    instance.appendChild(div)
+
+    autoShadowRoot(instance)
+
+    expect(instance).to.have.property('shadowRoot').equal(null)
+  })
+
+  it('attaches shadowRoot nodes open by default', () => {
+    const instance = document.createElement('shadowroot-test-element')
+    const template = document.createElement('template')
+    template.innerHTML = 'Hello World'
+    template.setAttribute('data-shadowroot', '')
+    instance.appendChild(template)
+
+    autoShadowRoot(instance)
+
+    expect(instance).to.have.property('shadowRoot').not.equal(null)
+    expect(instance.shadowRoot.textContent).to.equal('Hello World')
+  })
+
+  it('attaches shadowRoot nodes closed if `data-shadowroot` is `closed`', () => {
+    const instance = document.createElement('shadowroot-test-element')
+    const template = document.createElement('template')
+    template.innerHTML = 'Hello World'
+    template.setAttribute('data-shadowroot', 'closed')
+    instance.appendChild(template)
+
+    let shadowRoot = null
+    chai.spy.on(instance, 'attachShadow', (...args) => {
+      shadowRoot = Element.prototype.attachShadow.apply(instance, args)
+      return shadowRoot
+    })
+
+    autoShadowRoot(instance)
+
+    expect(instance).to.have.property('shadowRoot').equal(null)
+    expect(instance.attachShadow).to.have.been.called.once.with.exactly({mode: 'closed'})
+    expect(shadowRoot.textContent).to.equal('Hello World')
+  })
+})