Ayo
ce30b114a2
- this adds a new demo web app with vite HMR for development - all examples are covered with e2e tests
36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
import { WebComponent, html } from 'web-component-base'
|
|
|
|
/**
|
|
* v5 attribute-change correctness:
|
|
*
|
|
* - `label=""` (empty string) stays the string `''` — it is no longer
|
|
* coerced to boolean `true` / echoed as `"true"`.
|
|
* - `removeAttribute('label')` resets the prop to its **declared default**
|
|
* instead of writing `null` and throwing before render().
|
|
* - an attribute authored in markup **wins** over the default: defaults are
|
|
* reflected on connect and skip any attribute already present.
|
|
*/
|
|
export class AttrDemo extends WebComponent {
|
|
static props = {
|
|
label: 'default-label',
|
|
}
|
|
|
|
setValue = () => this.setAttribute('label', 'hello')
|
|
setEmpty = () => this.setAttribute('label', '')
|
|
remove = () => this.removeAttribute('label')
|
|
|
|
get template() {
|
|
const value = this.props.label
|
|
return html`
|
|
<p>label prop: <code class="value">${JSON.stringify(value)}</code></p>
|
|
<p>typeof: <code class="type">${typeof value}</code></p>
|
|
<button class="set-value" onclick=${this.setValue}>set "hello"</button>
|
|
<button class="set-empty" onclick=${this.setEmpty}>set "" (empty)</button>
|
|
<button class="remove" onclick=${this.remove}>
|
|
removeAttribute → default
|
|
</button>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('attr-demo', AttrDemo)
|