packages/runtime-dom/__tests__/customElement.spec.ts (3)

658-666: Prefer DOM-based assertions over full innerHTML string.

Asserting the slot element’s class directly is less brittle and lets us extend checks (e.g., attribute removal) without relying on serialization details.

Apply this diff in this test:

-  expect(e.shadowRoot!.innerHTML).toBe(
-    `<div><slot class="foo"></slot></div>`,
-  )
+  const slotEl = e.shadowRoot!.querySelector('slot')!
+  expect(slotEl.getAttribute('class')).toBe('foo')

   foo.value = 'bar'
   await nextTick()
-  expect(e.shadowRoot!.innerHTML).toBe(
-    `<div><slot class="bar"></slot></div>`,
-  )
+  expect(slotEl.getAttribute('class')).toBe('bar')
+  // optional: ensure DOM node was patched, not replaced
+  expect(e.shadowRoot!.querySelector('slot')).toBe(slotEl)

---

642-667: Add coverage for attribute removal (original bug scenario).

Issue #13904 mentions the class should be removed when toggled off. Let’s assert removal when the prop becomes undefined.

Add a new test (or extend this one) like:

test('remove slot attribute when prop becomes undefined', async () => {
  const foo = ref<string | undefined>('foo')
  const E = defineCustomElement({
    render() {
      return h('div', null, renderSlot(this.$slots, 'default', { class: foo.value }))
    }
  })
  customElements.define('my-el-slot-props-removal', E)
  container.innerHTML = `<my-el-slot-props-removal><span>hi</span></my-el-slot-props-removal>`
  const e = container.childNodes[0] as VueElement
  const slotEl = e.shadowRoot!.querySelector('slot')!
  expect(slotEl.getAttribute('class')).toBe('foo')

  foo.value = undefined
  await nextTick()
  expect(slotEl.hasAttribute('class')).toBe(false)
})

---

642-667: Consider a named-slot case to ensure props + name co-exist.

Validates BAIL path when props are present on non-default slots and that the name attribute is preserved.

You can add:

test('render named slot with props', async () => {
  const foo = ref('a')
  const E = defineCustomElement({
    render() {
      return h('div', null, renderSlot(this.$slots, 'named', { class: foo.value }))
    }
  })
  customElements.define('my-el-named-slot-props', E)
  container.innerHTML = `<my-el-named-slot-props><span slot="named">hi</span></my-el-named-slot-props>`
  const e = container.childNodes[0] as VueElement
  const slotEl = e.shadowRoot!.querySelector('slot[name="named"]')!
  expect(slotEl.getAttribute('class')).toBe('a')

  foo.value = 'b'
  await nextTick()
  expect(slotEl.getAttribute('class')).toBe('b')
})

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro