tombl.dev
a post-component library for building user-interfaces on the web.
1import { html } from 'dhtml'
2import { createRoot } from 'dhtml/client'
3import { assert, assert_eq, test } from '../../../scripts/test/test.ts'
4import { setup } from './setup.ts'
5
6test('custom elements instantiate correctly', () => {
7 const { root, el } = setup()
8
9 class CustomElement extends HTMLElement {
10 #thingName?: string
11 get thingName() {
12 return this.#thingName
13 }
14 set thingName(value) {
15 this.#thingName = value?.toUpperCase()
16 }
17
18 constructor() {
19 super()
20 this.innerText = 'inside custom element'
21 }
22 }
23
24 customElements.define('custom-element', CustomElement)
25
26 root.render(html`<custom-element thingName=${'hello'}></custom-element>`)
27 assert_eq(el.innerHTML, `<custom-element>inside custom element</custom-element>`)
28
29 const customElement = el.querySelector('custom-element') as CustomElement
30 assert(customElement instanceof CustomElement)
31 assert_eq(customElement.thingName, 'HELLO')
32})
33
34test('content renders into shadow dom', () => {
35 const { el } = setup()
36 const shadowRoot = el.attachShadow({ mode: 'open' })
37
38 const root = createRoot(shadowRoot)
39 root.render(html`<p>hello</p>`)
40
41 assert_eq(el.innerHTML, ``)
42 assert_eq(shadowRoot.innerHTML, `<p>hello</p>`)
43})