diff --git a/packages/scoped-custom-element-registry/CHANGELOG.md b/packages/scoped-custom-element-registry/CHANGELOG.md index 7798ad39..c45cefe8 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 cfa67bec..0885f299 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 ce36342b..69ad914f 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();