mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-30 00:46:29 +01:00
Code Issues Releases Wiki Activity

fix setting boolean attributes on custom elements (#6073)

Browse Source
This commit is contained in:
Geoff Rich 2021-04-30 08:48:27 -07:00 committed by GitHub
parent f0f8fae114
commit 7042755e7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/internal/dom.ts
View File

@ -148,7 +148,7 @@ export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attrib
export function set_custom_element_data(node, prop, value) {
if (prop in node) {
node[prop] = value;
node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
} else {
attr(node, prop, value);
}

3
test/custom-elements/samples/props/main.svelte
View File

@ -4,6 +4,7 @@
import './my-widget.svelte';
export let items = ['a', 'b', 'c'];
export let flagged = false;
</script>
<my-widget class="foo" {items}/>
<my-widget class="foo" {items} flag1={flagged} flag2 />

4
test/custom-elements/samples/props/my-widget.svelte
View File

@ -2,7 +2,11 @@
<script>
export let items = [];
export let flag1 = false;
export let flag2 = false;
</script>
<p>{items.length} items</p>
<p>{items.join(', ')}</p>
<p>{flag1 ? 'flagged (dynamic attribute)' : 'not flagged'}</p>
<p>{flag2 ? 'flagged (static attribute)' : 'not flagged'}</p>

6
test/custom-elements/samples/props/test.js
View File

@ -11,13 +11,17 @@ export default function (target) {
const el = target.querySelector('custom-element');
const widget = el.shadowRoot.querySelector('my-widget');
const [p1, p2] = widget.shadowRoot.querySelectorAll('p');
const [p1, p2, p3, p4] = widget.shadowRoot.querySelectorAll('p');
assert.equal(p1.textContent, '3 items');
assert.equal(p2.textContent, 'a, b, c');
assert.equal(p3.textContent, 'not flagged');
assert.equal(p4.textContent, 'flagged (static attribute)');
el.items = ['d', 'e', 'f', 'g', 'h'];
el.flagged = true;
assert.equal(p1.textContent, '5 items');
assert.equal(p2.textContent, 'd, e, f, g, h');
assert.equal(p3.textContent, 'flagged (dynamic attribute)');
}