diff --git a/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js b/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js
new file mode 100644
index 000000000..1bc863481
--- /dev/null
+++ b/packages/ui/components/core/test/SlotMixin.no-polyfill.test.js
@@ -0,0 +1,47 @@
+import sinon from 'sinon';
+import { defineCE, expect, html } from '@open-wc/testing';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { SlotMixin } from '@lion/ui/core.js';
+import { LitElement } from 'lit';
+
+it('does not scope elements when polyfill not loaded', async () => {
+ // @ts-expect-error
+ ShadowRoot.prototype.createElement = null;
+ class ScopedEl extends LitElement {}
+
+ const tagName = defineCE(
+ class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+ static get scopedElements() {
+ return {
+ // @ts-expect-error
+ ...super.scopedElements,
+ 'scoped-el': ScopedEl,
+ };
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ template: () => html``,
+ };
+ }
+
+ render() {
+ return html``;
+ }
+ },
+ );
+
+ const renderTarget = document.createElement('div');
+ const el = document.createElement(tagName);
+
+ // We don't use fixture, so we limit the amount of calls to document.createElement
+ const docSpy = sinon.spy(document, 'createElement');
+ document.body.appendChild(renderTarget);
+ renderTarget.appendChild(el);
+
+ expect(docSpy.callCount).to.equal(2);
+
+ document.body.removeChild(renderTarget);
+ docSpy.restore();
+});
diff --git a/packages/ui/components/core/test/SlotMixin.polyfill.test.js b/packages/ui/components/core/test/SlotMixin.polyfill.test.js
new file mode 100644
index 000000000..3cbfcecda
--- /dev/null
+++ b/packages/ui/components/core/test/SlotMixin.polyfill.test.js
@@ -0,0 +1,40 @@
+import sinon from 'sinon';
+import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { SlotMixin } from '@lion/ui/core.js';
+import { LitElement } from 'lit';
+
+it('supports scoped elements when polyfill loaded', async () => {
+ // @ts-ignore the scoped-custom-element-registry polyfill makes sure `ShadowRoot.prototype.createElement` is defined
+ const spy = sinon.spy(ShadowRoot.prototype, 'createElement');
+
+ class ScopedEl extends LitElement {}
+
+ const tagName = defineCE(
+ class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+ static get scopedElements() {
+ return {
+ // @ts-expect-error
+ ...super.scopedElements,
+ 'scoped-elm': ScopedEl,
+ };
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ template: () => html``,
+ };
+ }
+
+ render() {
+ return html``;
+ }
+ },
+ );
+
+ const tag = unsafeStatic(tagName);
+ await fixture(html`<${tag}>${tag}>`);
+
+ expect(spy.getCalls()).to.have.length(1);
+});
diff --git a/packages/ui/components/core/test/SlotMixin.test.js b/packages/ui/components/core/test/SlotMixin.test.js
index 24b3d83ef..e9b6dd57c 100644
--- a/packages/ui/components/core/test/SlotMixin.test.js
+++ b/packages/ui/components/core/test/SlotMixin.test.js
@@ -1,6 +1,4 @@
-import sinon from 'sinon';
import { defineCE, expect, fixture, fixtureSync, unsafeStatic, html } from '@open-wc/testing';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
import { SlotMixin } from '@lion/ui/core.js';
import { LitElement } from 'lit';
@@ -8,20 +6,6 @@ import { LitElement } from 'lit';
* @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
*/
-/**
- * loads a script into DOM and awaits loading it
- * @param {string} src
- */
-async function loadScript(src) {
- const script = document.createElement('script');
- script.src = src;
- document.head.appendChild(script);
-
- await new Promise(resolve => {
- script.onload = resolve;
- });
-}
-
describe('SlotMixin', () => {
it('inserts provided element into light dom and sets slot', async () => {
const tag = defineCE(
@@ -562,87 +546,4 @@ describe('SlotMixin', () => {
expect(el._templateNode.textContent).to.equal('1');
});
});
-
- describe('Scoped Registries', () => {
- it('supports scoped elements when polyfill loaded', async () => {
- const polyfill =
- '/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
- await loadScript(polyfill);
-
- // @ts-ignore the polyfill loaded above, makes sure `ShadowRoot.prototype.createElement` is defined
- const spy = sinon.spy(ShadowRoot.prototype, 'createElement');
-
- class ScopedEl extends LitElement {}
-
- const tagName = defineCE(
- class extends ScopedElementsMixin(SlotMixin(LitElement)) {
- static get scopedElements() {
- return {
- // @ts-expect-error
- ...super.scopedElements,
- 'scoped-elm': ScopedEl,
- };
- }
-
- get slots() {
- return {
- ...super.slots,
- template: () => html``,
- };
- }
-
- render() {
- return html``;
- }
- },
- );
-
- const tag = unsafeStatic(tagName);
- await fixture(html`<${tag}>${tag}>`);
-
- expect(spy.getCalls()).to.have.length(1);
- });
-
- it('does not scope elements when polyfill not loaded', async () => {
- // @ts-expect-error
- ShadowRoot.prototype.createElement = null;
- class ScopedEl extends LitElement {}
-
- const tagName = defineCE(
- class extends ScopedElementsMixin(SlotMixin(LitElement)) {
- static get scopedElements() {
- return {
- // @ts-expect-error
- ...super.scopedElements,
- 'scoped-el': ScopedEl,
- };
- }
-
- get slots() {
- return {
- ...super.slots,
- template: () => html``,
- };
- }
-
- render() {
- return html``;
- }
- },
- );
-
- const renderTarget = document.createElement('div');
- const el = document.createElement(tagName);
-
- // We don't use fixture, so we limit the amount of calls to document.createElement
- const docSpy = sinon.spy(document, 'createElement');
- document.body.appendChild(renderTarget);
- renderTarget.appendChild(el);
-
- expect(docSpy.callCount).to.equal(2);
-
- document.body.removeChild(renderTarget);
- docSpy.restore();
- });
- });
});