Merge pull request #534 from jmcgavin/fix-toggle-attribute-polyfill

fix: toggleAttribute polyfill should retain force argument

Author: bicknellr

packages/scoped-custom-element-registry/CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Fixed
+
+- toggleAttribute polyfill now retains the force argument if it is present
 
 # [0.0.7] - 2023-01-06
 

packages/scoped-custom-element-registry/README.md

@@ -22,7 +22,7 @@ upgrade it.
 Notes/limitations:
 
 - In order to leverage native CE when available, `observedAttributes` handling
-  must be simulated by patching `setAttribute`/`getAttribute` to call
+  must be simulated by patching `setAttribute`/`getAttribute`/`toggleAttribute` to call
   `attributeChangedCallback` manually, since while we can delegate constructors,
   the `observedAttributes` respected by the browser are fixed at define time.
   This means that native reflecting properties are not observable when set via

packages/scoped-custom-element-registry/src/scoped-custom-element-registry.js

@@ -51,7 +51,7 @@ if (!ShadowRoot.prototype.createElement) {
         );
       }
       // Since observedAttributes can't change, we approximate it by patching
-      // set/removeAttribute on the user's class
+      // set/remove/toggleAttribute on the user's class
       const attributeChangedCallback =
         elementClass.prototype.attributeChangedCallback;
       const observedAttributes = new Set(elementClass.observedAttributes || []);
@@ -307,8 +307,8 @@ if (!ShadowRoot.prototype.createElement) {
     };
   };
 
-  // Helper to patch CE class setAttribute/getAttribute to implement
-  // attributeChangedCallback
+  // Helper to patch CE class setAttribute/getAttribute/toggleAttribute to
+  // implement attributeChangedCallback
   const patchAttributes = (
     elementClass,
     observedAttributes,
@@ -348,15 +348,15 @@ if (!ShadowRoot.prototype.createElement) {
     }
     const toggleAttribute = elementClass.prototype.toggleAttribute;
     if (toggleAttribute) {
-      elementClass.prototype.toggleAttribute = function (n) {
+      elementClass.prototype.toggleAttribute = function (n, force) {
         const name = n.toLowerCase();
         if (observedAttributes.has(name)) {
           const old = this.getAttribute(name);
-          toggleAttribute.call(this, name);
+          toggleAttribute.call(this, name, force);
           const newValue = this.getAttribute(name);
           attributeChangedCallback.call(this, name, old, newValue);
         } else {
-          toggleAttribute.call(this, name);
+          toggleAttribute.call(this, name, force);
         }
       };
     }
@@ -387,17 +387,19 @@ if (!ShadowRoot.prototype.createElement) {
       patchHTMLElement(definition.elementClass);
       new definition.elementClass();
     }
-    // Approximate observedAttributes from the user class, since the stand-in element had none
-    definition.observedAttributes.forEach((attr) => {
-      if (instance.hasAttribute(attr)) {
-        definition.attributeChangedCallback.call(
-          instance,
-          attr,
-          null,
-          instance.getAttribute(attr)
-        );
-      }
-    });
+    if (definition.attributeChangedCallback) {
+      // Approximate observedAttributes from the user class, since the stand-in element had none
+      definition.observedAttributes.forEach((attr) => {
+        if (instance.hasAttribute(attr)) {
+          definition.attributeChangedCallback.call(
+            instance,
+            attr,
+            null,
+            instance.getAttribute(attr)
+          );
+        }
+      });
+    }
     if (isUpgrade && definition.connectedCallback && instance.isConnected) {
       definition.connectedCallback.call(instance);
     }

packages/scoped-custom-element-registry/test/Element.test.html.js

@@ -1,6 +1,11 @@
 import {expect} from '@open-wc/testing';
 
-import {getTestElement, getShadowRoot, getHTML} from './utils.js';
+import {
+  getTestElement,
+  getObservedAttributesTestElement,
+  getShadowRoot,
+  getHTML,
+} from './utils.js';
 
 describe('Element', () => {
   describe('global registry', () => {
@@ -104,4 +109,47 @@ describe('Element', () => {
       expect($el.firstElementChild).to.not.be.instanceof(CustomElementClass);
     });
   });
+
+  describe('attributes', () => {
+    it('should call setAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement([
+        'foo',
+      ]);
+      customElements.define(tagName, CustomElementClass);
+      const $el = document.createElement(tagName);
+
+      $el.setAttribute('foo', 'bar');
+
+      expect($el.getAttribute('foo')).to.equal('bar');
+    });
+
+    it('should call removeAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement([
+        'foo',
+      ]);
+      customElements.define(tagName, CustomElementClass);
+      const $el = getHTML(`<${tagName} foo></${tagName}>`);
+
+      $el.removeAttribute('foo');
+
+      expect($el.hasAttribute('foo')).to.be.false;
+    });
+
+    it('should call toggleAttribute', () => {
+      const {tagName, CustomElementClass} = getObservedAttributesTestElement([
+        'foo',
+      ]);
+      customElements.define(tagName, CustomElementClass);
+      const $el = document.createElement(tagName);
+
+      $el.toggleAttribute('foo', false);
+
+      expect($el.hasAttribute('foo')).to.be.false;
+
+      $el.setAttribute('foo', '');
+      $el.toggleAttribute('foo', true);
+
+      expect($el.hasAttribute('foo')).to.be.true;
+    });
+  });
 });

packages/scoped-custom-element-registry/test/utils.js

@@ -30,6 +30,22 @@ export const getTestElement = () => ({
   CustomElementClass: class extends HTMLElement {},
 });
 
+/**
+ *
+ * @param {Array<string>} observedAttributeNames the names of the attributes you want to observe
+ * @returns {{CustomElementClass: typeof HTMLElement, tagName: string}}
+ */
+export const getObservedAttributesTestElement = (
+  observedAttributeNames = []
+) => ({
+  tagName: getTestTagName(),
+  CustomElementClass: class extends HTMLElement {
+    static get observedAttributes() {
+      return observedAttributeNames;
+    }
+  },
+});
+
 export const getFormAssociatedTestElement = () => ({
   tagName: getTestTagName(),
   CustomElementClass: class extends HTMLElement {