Merge pull request #308 from github/wm-kc/observe-shadow-root-on-conn…

…ected-callback

Observe shadow root on connected callback

docs/_guide/rendering-2.md

@@ -89,7 +89,7 @@ class HelloWorldElement extends HTMLElement {
  }
 
  attributeChangedCallback() {
- render(() => html`
+ render(html`
  <div>
  Hello <span>${ this.name }</span>
  </div>`,
@@ -125,7 +125,7 @@ class HelloWorldElement extends HTMLElement {
  }
 
  update() {
- render(() => html`
+ render(html`
  <div>
  Hello <span>${ this.#name }</span>
  </div>`,

docs/_guide/rendering.md

@@ -66,7 +66,7 @@ class HelloWorldElement extends HTMLElement {
  }
 
  attributeChangedCallback() {
- render(() => html`
+ render(html`
  <div>
  Hello <span>${ this.name }</span>
  </div>`,
@@ -102,7 +102,7 @@ class HelloWorldElement extends HTMLElement {
  }
 
  update() {
- render(() => html`
+ render(html`
  <div>
  Hello <span>${ this.#name }</span>
  </div>`,

src/core.ts

@@ -3,6 +3,7 @@ import {bind, bindShadow} from './bind.js'
 import {autoShadowRoot} from './auto-shadow-root.js'
 import {defineObservedAttributes, initializeAttrs} from './attr.js'
 import type {CustomElementClass} from './custom-element.js'
+import {observe} from './lazy-define.js'
 
 const symbol = Symbol.for('catalyst')
 
@@ -57,7 +58,10 @@ export class CatalystDelegate {
  initializeAttrs(instance)
  bind(instance)
  connectedCallback?.call(instance)
- if (instance.shadowRoot) bindShadow(instance.shadowRoot)
+ if (instance.shadowRoot) {
+ bindShadow(instance.shadowRoot)
+ observe(instance.shadowRoot)
+ }
  }
 
  disconnectedCallback(element: HTMLElement, disconnectedCallback: () => void) {

src/lazy-define.ts

@@ -55,21 +55,24 @@ const strategies: Record<string, Strategy> = {
  visible
 }
 
-const timers = new WeakMap<Element, number>()
-function scan(node: Element) {
- cancelAnimationFrame(timers.get(node) || 0)
+type ElementLike = Element | Document | ShadowRoot
+
+const timers = new WeakMap<ElementLike, number>()
+function scan(element: ElementLike) {
+ cancelAnimationFrame(timers.get(element) || 0)
  timers.set(
- node,
+ element,
  requestAnimationFrame(() => {
  for (const tagName of dynamicElements.keys()) {
- const child: Element | null = node.matches(tagName) ? node : node.querySelector(tagName)
+ const child: Element | null =
+ element instanceof Element && element.matches(tagName) ? element : element.querySelector(tagName)
  if (customElements.get(tagName) || child) {
  const strategyName = (child?.getAttribute('data-load-on') || 'ready') as keyof typeof strategies
  const strategy = strategyName in strategies ? strategies[strategyName] : strategies.ready
  // eslint-disable-next-line github/no-then
  for (const cb of dynamicElements.get(tagName) || []) strategy(tagName).then(cb)
  dynamicElements.delete(tagName)
- timers.delete(node)
+ timers.delete(element)
  }
  }
  })
@@ -82,17 +85,20 @@ export function lazyDefine(tagName: string, callback: () => void) {
  if (!dynamicElements.has(tagName)) dynamicElements.set(tagName, new Set<() => void>())
  dynamicElements.get(tagName)!.add(callback)
 
- scan(document.body)
+ observe(document)
+}
 
- if (!elementLoader) {
- elementLoader = new MutationObserver(mutations => {
- if (!dynamicElements.size) return
- for (const mutation of mutations) {
- for (const node of mutation.addedNodes) {
- if (node instanceof Element) scan(node)
- }
+export function observe(target: ElementLike): void {
+ elementLoader ||= new MutationObserver(mutations => {
+ if (!dynamicElements.size) return
+ for (const mutation of mutations) {
+ for (const node of mutation.addedNodes) {
+ if (node instanceof Element) scan(node)
  }
- })
- elementLoader.observe(document, {subtree: true, childList: true})
- }
+ }
+ })
+
+ scan(target)
+
+ elementLoader.observe(target, {subtree: true, childList: true})
 }

test/controller.ts

@@ -1,7 +1,8 @@
 import {expect, fixture, html} from '@open-wc/testing'
-import {replace, fake} from 'sinon'
+import {replace, fake, spy} from 'sinon'
 import {controller} from '../src/controller.js'
 import {attr} from '../src/attr.js'
+import {lazyDefine} from '../src/lazy-define.js'
 
 describe('controller', () => {
  let instance
@@ -65,6 +66,23 @@ describe('controller', () => {
  expect(instance.foo).to.have.callCount(1)
  })
 
+ it('observes changes on shadowRoots', async () => {
+ const onDefine = spy()
+ lazyDefine('nested-shadow-element', onDefine)
+
+ @controller
+ class ControllerObserveShadowElement extends HTMLElement {
+ connectedCallback() {
+ const shadowRoot = this.attachShadow({mode: 'open'})
+ // eslint-disable-next-line github/unescaped-html-literal
+ shadowRoot.innerHTML = '<div><nested-shadow-element></nested-shadow-element></div>'
+ }
+ }
+ instance = await fixture<ControllerObserveShadowElement>(html`<controller-observe-shadow />`)
+
+ expect(onDefine).to.be.callCount(1)
+ })
+
  it('binds auto shadowRoots', async () => {
  @controller
  class ControllerBindAutoShadowElement extends HTMLElement {

test/lazy-define.ts

@@ -1,6 +1,6 @@
 import {expect, fixture, html} from '@open-wc/testing'
 import {spy} from 'sinon'
-import {lazyDefine} from '../src/lazy-define.js'
+import {lazyDefine, observe} from '../src/lazy-define.js'
 
 const animationFrame = () => new Promise<unknown>(resolve => requestAnimationFrame(resolve))
 
@@ -45,6 +45,21 @@ describe('lazyDefine', () => {
 
  expect(onDefine).to.be.callCount(2)
  })
+
+ it('lazy loads elements in shadow roots', async () => {
+ const onDefine = spy()
+ lazyDefine('nested-shadow-element', onDefine)
+
+ const el = await fixture(html` <div></div> `)
+ const shadowRoot = el.attachShadow({mode: 'open'})
+ observe(shadowRoot)
+ // eslint-disable-next-line github/unescaped-html-literal
+ shadowRoot.innerHTML = '<div><nested-shadow-element></nested-shadow-element></div>'
+
+ await animationFrame()
+
+ expect(onDefine).to.be.callCount(1)
+ })
  })
 
  describe('firstInteraction strategy', () => {