diff --git a/test/test-basic-properties.js b/test/test-basic-properties.js index a825ee9..bb88f20 100644 --- a/test/test-basic-properties.js +++ b/test/test-basic-properties.js @@ -23,6 +23,9 @@ class TestElement extends XElement { type: String, default: null, }, + undefinedProperty: { + type: String, + }, typelessProperty: {}, typelessPropertyWithCustomAttribute: { attribute: 'custom-attribute-typeless', @@ -33,12 +36,13 @@ class TestElement extends XElement { }; } static template(html) { - return ({ normalProperty, camelCaseProperty, numericProperty, nullProperty }) => { + return ({ normalProperty, camelCaseProperty, numericProperty, nullProperty, undefinedProperty }) => { return html`
${normalProperty}
${camelCaseProperty} ${numericProperty} ${nullProperty} + ${undefinedProperty} `; }; } @@ -60,6 +64,12 @@ it('renders an empty string in place of null value', () => { assert(el.shadowRoot.getElementById('nul').textContent === ''); }); +it('renders an empty string in place of undefined value', () => { + const el = document.createElement('test-element'); + document.body.append(el); + assert(el.shadowRoot.getElementById('undef').textContent === ''); +}); + it('property setter updates on next micro tick after connect', async () => { const el = document.createElement('test-element'); el.camelCaseProperty = 'Nonconforming'; @@ -99,6 +109,7 @@ it('observes all dash-cased versions of public, typeless, serializable, and decl 'camel-case-property', 'numeric-property', 'null-property', + 'undefined-property', 'typeless-property', 'custom-attribute-typeless', ]; diff --git a/x-element.js b/x-element.js index 2dfb52f..10627e7 100644 --- a/x-element.js +++ b/x-element.js @@ -1488,10 +1488,11 @@ class TemplateEngine { } const previousSibling = node.previousSibling; if (previousSibling === startNode) { - const textNode = document.createTextNode(value ?? ''); + const textNode = document.createTextNode(''); + textNode.textContent = value; node.parentNode.insertBefore(textNode, node); } else { - previousSibling.textContent = value ?? ''; + previousSibling.textContent = value; } } }