[scoped-custom-element-registry] Adds shadowRoot.createElementNS (#582

) * Adds shadowRoot.createElementNS --------- Co-authored-by: Steve Orvell <[email protected]> Co-authored-by: Justin Fagnani <[email protected]>
webcomponents · Jun 7, 2024 · bcdc52b · bcdc52b
1 parent aeb2038
commit bcdc52b
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/packages/scoped-custom-element-registry/CHANGELOG.md b/packages/scoped-custom-element-registry/CHANGELOG.md
@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- registry in ShadowRootInit; matches current proposal but customElements
+- Added support for ShadowRoot.prototype.createElementNS()
+
+- Added the `registry` property to ShadowRootInit to match current proposal. `customElements`
   remains supported for compatibility
 
 ### Changed

diff --git a/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts b/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts
@@ -656,6 +656,7 @@ const installScopedCreationMethod = (
   };
 };
 installScopedCreationMethod(ShadowRoot, 'createElement', document);
+installScopedCreationMethod(ShadowRoot, 'createElementNS', document);
 installScopedCreationMethod(ShadowRoot, 'importNode', document);
 installScopedCreationMethod(Element, 'insertAdjacentHTML');
 

diff --git a/packages/scoped-custom-element-registry/test/ShadowRoot.test.html.js b/packages/scoped-custom-element-registry/test/ShadowRoot.test.html.js
@@ -163,6 +163,51 @@ describe('ShadowRoot', () => {
       });
     });
 
+    describe('createElementNS', () => {
+      it('should create a regular element', () => {
+        const registry = new CustomElementRegistry();
+        const shadowRoot = getShadowRoot(registry);
+
+        const $el = shadowRoot.createElementNS(
+          'http://www.w3.org/1999/xhtml',
+          'div'
+        );
+
+        expect($el).to.not.be.undefined;
+        expect($el).to.be.instanceof(HTMLDivElement);
+      });
+
+      it(`shouldn't upgrade an element defined in the global registry`, () => {
+        const {tagName, CustomElementClass} = getTestElement();
+        customElements.define(tagName, CustomElementClass);
+        const registry = new CustomElementRegistry();
+        const shadowRoot = getShadowRoot(registry);
+
+        const $el = shadowRoot.createElementNS(
+          'http://www.w3.org/1999/xhtml',
+          tagName
+        );
+
+        expect($el).to.not.be.undefined;
+        expect($el).to.not.be.instanceof(CustomElementClass);
+      });
+
+      it(`should upgrade an element defined in the custom registry`, () => {
+        const {tagName, CustomElementClass} = getTestElement();
+        const registry = new CustomElementRegistry();
+        registry.define(tagName, CustomElementClass);
+        const shadowRoot = getShadowRoot(registry);
+
+        const $el = shadowRoot.createElementNS(
+          'http://www.w3.org/1999/xhtml',
+          tagName
+        );
+
+        expect($el).to.not.be.undefined;
+        expect($el).to.be.instanceof(CustomElementClass);
+      });
+    });
+
     describe('innerHTML', () => {
       it(`shouldn't upgrade a defined custom element in the global registry`, () => {
         const {tagName, CustomElementClass} = getTestElement();
@@ -292,6 +337,34 @@ describe('ShadowRoot', () => {
       });
     });
 
+    describe('createElementNS', () => {
+      it('should create a regular element', () => {
+        const shadowRoot = getShadowRoot();
+
+        const $el = shadowRoot.createElementNS(
+          'http://www.w3.org/1999/xhtml',
+          'div'
+        );
+
+        expect($el).to.not.be.undefined;
+        expect($el).to.be.instanceof(HTMLDivElement);
+      });
+
+      it(`should upgrade an element defined in the global registry`, () => {
+        const {tagName, CustomElementClass} = getTestElement();
+        customElements.define(tagName, CustomElementClass);
+        const shadowRoot = getShadowRoot();
+
+        const $el = shadowRoot.createElementNS(
+          'http://www.w3.org/1999/xhtml',
+          tagName
+        );
+
+        expect($el).to.not.be.undefined;
+        expect($el).to.be.instanceof(CustomElementClass);
+      });
+    });
+
     describe('innerHTML', () => {
       it(`shouldn't upgrade a defined custom element in a custom registry`, () => {
         const {tagName, CustomElementClass} = getTestElement();