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;
}
}
}