From bcdc52bc9ece7d9164700e6ee4f6d068291aa34e Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Fri, 7 Jun 2024 08:35:17 -0700
Subject: [PATCH] [scoped-custom-element-registry] Adds
 `shadowRoot.createElementNS` (#582)

* Adds shadowRoot.createElementNS
---------

Co-authored-by: Steve Orvell <sorvell@google.com>
Co-authored-by: Justin Fagnani <justin@fagnani.com>
---
 .../CHANGELOG.md                              |  4 +-
 .../src/scoped-custom-element-registry.ts     |  1 +
 .../test/ShadowRoot.test.html.js              | 73 +++++++++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/packages/scoped-custom-element-registry/CHANGELOG.md b/packages/scoped-custom-element-registry/CHANGELOG.md
index 7798ad397..c45cefe89 100644
--- 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
index cfa67bec8..0885f299d 100644
--- 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
index ce36342b6..69ad914f0 100644
--- 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();