diff --git a/src/index.js b/src/index.js index fb5b3f04b..c396bf1a0 100755 --- a/src/index.js +++ b/src/index.js @@ -176,29 +176,35 @@ 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; + } + + 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'); 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); } }