diff --git a/src/HTMLText.ts b/src/HTMLText.ts index 50be907..70282ea 100644 --- 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 index d3586d7..663cc92 100644 --- 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', () =>