From 992a9938d3bd12820891c93fdbf0dde928fa236d Mon Sep 17 00:00:00 2001 From: sumthief Date: Thu, 3 Dec 2020 01:15:44 +0700 Subject: [PATCH 1/2] fix(styles): change style injection way --- src/index.js | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index fb5b3f04b..40a908685 100755 --- a/src/index.js +++ b/src/index.js @@ -176,29 +176,25 @@ class ReactTooltip extends React.Component { /* Look for the closest DOM root having tooltip and inject styles. */ injectStyles() { - const { id } = this.props; - const targetArray = this.getTargetArray(id); - const domRoots = []; - targetArray.forEach(target => { - let parentNode = target.parentNode; - while (parentNode.parentNode && !parentNode.host) { - parentNode = parentNode.parentNode; - } - const head = parentNode.querySelector('head'); - domRoots.push(head || parentNode); - }); - if (domRoots.length) { + const { tooltipRef } = this; + if (!tooltipRef) { + return; + } + + let parentNode = tooltipRef.parentNode; + while (parentNode.parentNode) { + parentNode = parentNode.parentNode; + } + const head = parentNode.querySelector('head'); + + const domRoot = parentNode || head; + // Prevent styles duplication. + if (!domRoot.querySelector('style[data-react-tooltip]')) { const style = document.createElement('style'); style.textContent = baseCss; style.setAttribute('data-react-tooltip', 'true'); - domRoots - .filter((item, idx, src) => src.indexOf(item) === idx) - .forEach(domRoot => { - // Prevent styles duplication. - if (!domRoot.querySelector('style[data-react-tooltip]')) { - domRoot.appendChild(style); - } - }); + + domRoot.appendChild(style); } } From 76dabb02b4dc8a2437203ac2a5f4b2c8ddd4eaa2 Mon Sep 17 00:00:00 2001 From: sumthief Date: Tue, 2 Feb 2021 23:16:40 +0700 Subject: [PATCH 2/2] fix(styles): fix invalid appendChild usage --- src/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 40a908685..c396bf1a0 100755 --- a/src/index.js +++ b/src/index.js @@ -185,9 +185,19 @@ class ReactTooltip extends React.Component { while (parentNode.parentNode) { parentNode = parentNode.parentNode; } - const head = parentNode.querySelector('head'); - const domRoot = parentNode || head; + let domRoot; + + switch (parentNode.constructor.name) { + case 'HTMLDocument': + domRoot = parentNode.head; + break; + case 'ShadowRoot': + default: + domRoot = parentNode; + break; + } + // Prevent styles duplication. if (!domRoot.querySelector('style[data-react-tooltip]')) { const style = document.createElement('style');