feat(attrs): adds ability to toggle boolean attributes

webtides · Jun 24, 2024 · f607e88 · f607e88
1 parent ada1926
commit f607e88
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/dom-parts/directives.js b/src/dom-parts/directives.js
@@ -130,6 +130,10 @@ export class OptionalAttributeDirective extends Directive {
      */
     stringify(condition, attributeName, attributeValue = '') {
         if (condition) {
+            if (attributeValue === '') {
+                // empty string toggles boolean attributes
+                return `${camelToDash(attributeName)}`;
+            }
             return `${camelToDash(attributeName)}='${encodeAttribute(
                 typeof attributeValue !== 'string' ? JSON.stringify(attributeValue) : attributeValue,
             )}'`;

diff --git a/test/unit/directive-optional-attribute.test.js b/test/unit/directive-optional-attribute.test.js
@@ -29,6 +29,20 @@ describe('optionalAttribute directive', () => {
         assert.isFalse(el.hasAttribute('attr'));
     });
 
+    it('adds a boolean attributes when condition is truthy and the value is an empty string', async () => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute#:~:text=into%20a%20string.-,Boolean,-attributes%20are%20considered
+        let condition = true;
+
+        // SSR
+        const templateResult = html`<div ${optionalAttribute(condition, 'attr', '')}></div>`;
+        assert.equal(stripCommentMarkers(templateResult.toString()), '<div attr></div>');
+        // CSR
+        const el = document.createElement('div');
+        const directive = new OptionalAttributeDirective(el);
+        directive.update(condition, 'attr', 'string');
+        assert.isTrue(el.hasAttribute('attr'));
+    });
+
     it('does add and remove an attributes when condition is toggled', async () => {
         let condition = true;
         // SSR