Fix: Remove the usage of ShadowRoot (#36)

pixijs-userland · Jan 3, 2023 · 65f7c29 · 65f7c29
1 parent ccede45
commit 65f7c29
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 50 deletions.
diff --git a/src/HTMLText.ts b/src/HTMLText.ts
@@ -57,8 +57,6 @@ export class HTMLText extends Sprite
     private _style: HTMLTextStyle | null = null;
     private _autoResolution = true;
     private _loading = false;
-    private _shadow: HTMLElement;
-    private _shadowRoot: ShadowRoot;
     private localStyleID = -1;
     private dirty = false;
 
@@ -88,7 +86,6 @@ export class HTMLText extends Sprite
 
         const nssvg = 'http://www.w3.org/2000/svg';
         const nsxhtml = 'http://www.w3.org/1999/xhtml';
-        const shadow = document.createElement('div');
         const svgRoot = document.createElementNS(nssvg, 'svg');
         const foreignObject = document.createElementNS(nssvg, 'foreignObject');
         const domElement = document.createElementNS(nsxhtml, 'div');
@@ -102,7 +99,6 @@ export class HTMLText extends Sprite
 
         this.maxWidth = HTMLText.defaultMaxWidth;
         this.maxHeight = HTMLText.defaultMaxHeight;
-        this._shadow = shadow;
         this._domElement = domElement;
         this._styleElement = styleElement;
         this._svgRoot = svgRoot;
@@ -111,17 +107,6 @@ export class HTMLText extends Sprite
         this._foreignObject.appendChild(domElement);
         this._image = image;
         this._autoResolution = HTMLText.defaultAutoResolution;
-        this._shadowRoot = shadow.attachShadow({ mode: 'open' });
-        this._shadowRoot.appendChild(svgRoot);
-        shadow.setAttribute('data-pixi-html-text', '1');
-        Object.assign(shadow.style, {
-            position: 'absolute',
-            top: '0',
-            left: '-1px',
-            width: '1px',
-            height: '1px',
-        });
-        document.body.appendChild(shadow);
         this._resolution = HTMLText.defaultResolution ?? settings.RESOLUTION;
         this.text = text;
         this.style = style;
@@ -152,8 +137,11 @@ export class HTMLText extends Sprite
         this._styleElement.textContent = style.toGlobalCSS();
 
         // Measure the contents using the shadow DOM
+        document.body.appendChild(this._svgRoot);
         const contentBounds = this._domElement.getBoundingClientRect();
 
+        this._svgRoot.remove();
+
         const contentWidth = Math.min(this.maxWidth, Math.ceil(contentBounds.width));
         const contentHeight = Math.min(this.maxHeight, Math.ceil(contentBounds.height));
 
@@ -369,9 +357,6 @@ export class HTMLText extends Sprite
         this._foreignObject = forceClear;
         this._styleElement?.remove();
         this._styleElement = forceClear;
-        this._shadow?.remove();
-        this._shadow = forceClear;
-        this._shadowRoot = forceClear;
         this._image.onload = null;
         this._image.src = '';
         this._image = forceClear;

diff --git a/test/HTMLText.test.ts b/test/HTMLText.test.ts
@@ -13,38 +13,6 @@ describe('HTMLText', () =>
         text.destroy();
     });
 
-    it('should clean up the shadow element', () =>
-    {
-        const query = '[data-pixi-html-text]';
-
-        expect(document.querySelector(query)).toBeFalsy();
-
-        const text = new HTMLText('Hello world!');
-
-        expect(document.querySelector(query)).toBeTruthy();
-
-        text.destroy();
-
-        expect(document.querySelector(query)).toBeFalsy();
-    });
-
-    it('should clean up the shadow element multiples', () =>
-    {
-        const query = '[data-pixi-html-text]';
-
-        expect(document.querySelector(query)).toBeFalsy();
-
-        const text = new HTMLText('Hello world!');
-        const text2 = new HTMLText('Hello world2!');
-
-        expect(document.querySelector(query)).toBeTruthy();
-
-        text.destroy();
-        text2.destroy();
-
-        expect(document.querySelector(query)).toBeFalsy();
-    });
-
     describe('measureText', () =>
     {
         it('should measure default text', () =>