diff --git a/public/index-rollup.html b/public/index-rollup.html
index 4079e8f9..077f6190 100644
--- a/public/index-rollup.html
+++ b/public/index-rollup.html
@@ -7,7 +7,7 @@
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Dev - React Tooltip</title>
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" id="style-rt" href="index.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript>
diff --git a/src/App.tsx b/src/App.tsx
index fd85b9ad..85c558f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,25 +33,30 @@ function App() {
       >
         My button
       </button>
-      <Tooltip place="bottom" anchorId={anchorId} isOpen={isDarkOpen} setIsOpen={setIsDarkOpen} />
+      <Tooltip
+        place="bottom"
+        anchorSelect={anchorId}
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+      />
       <Tooltip
         place="top"
         variant="success"
-        anchorId="button2"
+        anchorSelect="button2"
         isOpen={isDarkOpen}
         setIsOpen={setIsDarkOpen}
       />
       <Tooltip
         place="top"
         variant="info"
-        anchorId="button3"
+        anchorSelect="button3"
         isOpen={isDarkOpen}
         setIsOpen={setIsDarkOpen}
       />
       <Tooltip
         place="right"
         variant="info"
-        anchorId="button3"
+        anchorSelect="button3"
         content="My big tooltip content"
         isOpen={isDarkOpen}
         setIsOpen={setIsDarkOpen}
@@ -109,7 +114,7 @@ function App() {
             Hover me!
           </div>
           <Tooltip
-            anchorId="floatAnchor"
+            anchorSelect="floatAnchor"
             content={
               toggle
                 ? 'This is a float tooltip with a very very large content string'
@@ -133,7 +138,7 @@ function App() {
             Click me!
           </div>
           <Tooltip
-            anchorId="onClickAnchor"
+            anchorSelect="onClickAnchor"
             content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
             events={['click']}
             position={position}
@@ -146,7 +151,7 @@ function App() {
         <button id="buttonCallbacks">Check the dev console</button>
         <Tooltip
           place="bottom"
-          anchorId="buttonCallbacks"
+          anchorSelect="buttonCallbacks"
           // eslint-disable-next-line no-console
           afterShow={() => console.log('After show')}
           // eslint-disable-next-line no-console
@@ -158,7 +163,7 @@ function App() {
         <Tooltip
           events={['click']}
           place="bottom"
-          anchorId="buttonCallbacksClick"
+          anchorSelect="buttonCallbacksClick"
           // eslint-disable-next-line no-console
           afterShow={() => console.log('After show with click')}
           // eslint-disable-next-line no-console
@@ -170,7 +175,7 @@ function App() {
         <Tooltip
           delayShow={1000}
           place="bottom"
-          anchorId="buttonCallbacksDelay"
+          anchorSelect="buttonCallbacksDelay"
           // eslint-disable-next-line no-console
           afterShow={() => console.log('After show with delay')}
           // eslint-disable-next-line no-console
@@ -202,7 +207,7 @@ function App() {
 
         <Tooltip
           place="top"
-          anchorId="withoutCustomMiddleware"
+          anchorSelect="withoutCustomMiddleware"
           content="Showing tooltip with default middlewares"
           positionStrategy="fixed"
         />
@@ -231,7 +236,7 @@ function App() {
 
         <Tooltip
           place="top"
-          anchorId="withCustomMiddleware"
+          anchorSelect="withCustomMiddleware"
           content="Showing tooltip with custom inline middleware"
           positionStrategy="fixed"
           middlewares={[inline(), offset(10)]}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 7bdd76bd..b9d1a967 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -5,9 +5,9 @@ import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { getScrollParent } from 'utils/get-scroll-parent'
 import { computeTooltipPosition } from 'utils/compute-positions'
-import coreStyles from './core-styles.module.css'
 import styles from './styles.module.css'
 import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
+import coreStyles from './core-styles.module.css'
 
 const Tooltip = ({
   // props
@@ -17,6 +17,7 @@ const Tooltip = ({
   variant = 'dark',
   anchorId,
   anchorSelect,
+  root,
   place = 'top',
   offset = 10,
   events = ['hover'],
@@ -56,8 +57,13 @@ const Tooltip = ({
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState(false)
   const [rendered, setRendered] = useState(false)
+
   const wasShowing = useRef(false)
   const lastFloatPosition = useRef<IPosition | null>(null)
+
+  /** Set IsShadowRoot const */
+  const isShadowDom = root instanceof ShadowRoot
+
   /**
    * @todo Remove this in a future version (provider/wrapper method is deprecated)
    */
@@ -68,6 +74,29 @@ const Tooltip = ({
 
   const shouldOpenOnClick = openOnClick || events.includes('click')
 
+  // If isShadowDom update to true, set the inline CSS to the shadow DOM
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (isShadowDom && document.getElementById('style-rt')) {
+        const externalStylesheet = document.getElementById('style-rt')
+        const hrefCss = externalStylesheet!.getAttribute('href')
+
+        // Fetch the CSS file, should be easier tbh but this works
+        fetch(hrefCss as string)
+          .then((response) => response.text())
+          .then((cssContent) => {
+            const styleElement = document.createElement('style')
+            styleElement.textContent = cssContent
+
+            // Add the new <style> tag to the document's head or any other appropriate location
+            root.appendChild(styleElement)
+          })
+          .catch((error) => {
+            console.error('Error fetching the CSS file:', error)
+          })
+      }
+    }
+  }, [isShadowDom, root])
   /**
    * useLayoutEffect runs before useEffect,
    * but should be used carefully because of caveats
@@ -272,7 +301,8 @@ const Tooltip = ({
   }
 
   const handleClickOutsideAnchors = (event: MouseEvent) => {
-    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
+    // Root querySelector on either Shadow DOM or document, seems to work
+    const anchorById = root.querySelector(`[id='${anchorId}']`)
     const anchors = [anchorById, ...anchorsBySelect]
     if (anchors.some((anchor) => anchor?.contains(event.target as HTMLElement))) {
       return
@@ -298,7 +328,8 @@ const Tooltip = ({
       elementRefs.add({ current: anchor })
     })
 
-    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
+    // Root querySelector on either Shadow DOM or document, seems to work
+    const anchorById = root.querySelector<HTMLElement>(`[id='${anchorId}']`)
     if (anchorById) {
       elementRefs.add({ current: anchorById })
     }
@@ -371,6 +402,8 @@ const Tooltip = ({
 
     return () => {
       if (closeOnScroll) {
+        // window to remove with Shadow DOM somewhat
+        // Click event doesn't work yet
         window.removeEventListener('scroll', handleScrollResize)
         anchorScrollParent?.removeEventListener('scroll', handleScrollResize)
         tooltipScrollParent?.removeEventListener('scroll', handleScrollResize)
@@ -474,7 +507,7 @@ const Tooltip = ({
     return () => {
       documentObserver.disconnect()
     }
-  }, [id, anchorSelect, activeAnchor])
+  }, [id, anchorSelect, activeAnchor, isShadowDom, root])
 
   const updateTooltipPosition = () => {
     if (position) {
@@ -540,7 +573,8 @@ const Tooltip = ({
   }, [content, contentWrapperRef?.current])
 
   useEffect(() => {
-    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
+    // Root querySelector on either Shadow DOM or document, seems to work
+    const anchorById = root.querySelector(`[id='${anchorId}']`)
     const anchors = [...anchorsBySelect, anchorById]
     if (!activeAnchor || !anchors.includes(activeAnchor)) {
       /**
@@ -550,7 +584,7 @@ const Tooltip = ({
        */
       setActiveAnchor(anchorsBySelect[0] ?? anchorById)
     }
-  }, [anchorId, anchorsBySelect, activeAnchor])
+  }, [anchorId, anchorsBySelect, activeAnchor, isShadowDom, root])
 
   useEffect(() => {
     return () => {
@@ -572,13 +606,14 @@ const Tooltip = ({
       return
     }
     try {
-      const anchors = Array.from(document.querySelectorAll<HTMLElement>(selector))
+      // Root querySelector on either Shadow DOM or document, seems to work
+      const anchors: HTMLElement[] = Array.from(root.querySelectorAll(selector))
       setAnchorsBySelect(anchors)
     } catch {
       // warning was already issued in the controller
       setAnchorsBySelect([])
     }
-  }, [id, anchorSelect])
+  }, [id, anchorSelect, isShadowDom, root])
 
   const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0
 
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index 65a53c29..cfc71c77 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -54,6 +54,7 @@ export interface ITooltip {
   classNameArrow?: string
   content?: ChildrenType
   contentWrapperRef?: RefObject<HTMLDivElement>
+  root: Document | ShadowRoot
   place?: PlacesType
   offset?: number
   id?: string
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 424b5b11..e1c774c7 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -44,7 +44,6 @@ const TooltipController = ({
   style,
   position,
   isOpen,
-  disableStyleInjection = false,
   border,
   opacity,
   setIsOpen,
@@ -64,7 +63,12 @@ const TooltipController = ({
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
   const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)
-  const styleInjectionRef = useRef(disableStyleInjection)
+  /** Shadow Root Check */
+  const [isShadowChecked, setIsShadowChecked] = useState(false)
+  /** ShadowRoot or Document if the tooltip isn't in one */
+  const shadowCheckRef = useRef<HTMLDivElement>(null)
+  const [root, setRoot] = useState<ShadowRoot | Document>(document)
+
   /**
    * @todo Remove this in a future version (provider/wrapper method is deprecated)
    */
@@ -82,6 +86,18 @@ const TooltipController = ({
     return dataAttributes
   }
 
+  /** Checking if Root node is shadow dom once */
+  useEffect(() => {
+    if (!isShadowChecked && shadowCheckRef.current) {
+      setIsShadowChecked(true)
+      setRoot(
+        shadowCheckRef.current.getRootNode() instanceof ShadowRoot
+          ? (shadowCheckRef.current.getRootNode() as ShadowRoot)
+          : document,
+      )
+    }
+  }, [isShadowChecked, shadowCheckRef])
+
   const applyAllDataAttributesFromAnchorElement = (
     dataAttributes: Record<string, string | null>,
   ) => {
@@ -173,94 +189,75 @@ const TooltipController = ({
   }, [positionStrategy])
 
   useEffect(() => {
-    if (styleInjectionRef.current === disableStyleInjection) {
-      return
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.')
-    }
-  }, [disableStyleInjection])
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.dispatchEvent(
-        new CustomEvent('react-tooltip-inject-styles', {
-          detail: {
-            disableCore: disableStyleInjection === 'core',
-            disableBase: disableStyleInjection,
-          },
-        }),
-      )
-    }
-  }, [])
+    // Whenever the Shadow Dom is checked, run the useEffect with the correct Root
+    if (isShadowChecked) {
+      const elementRefs = new Set(anchorRefs)
 
-  useEffect(() => {
-    const elementRefs = new Set(anchorRefs)
-
-    let selector = anchorSelect
-    if (!selector && id) {
-      selector = `[data-tooltip-id='${id}']`
-    }
-    if (selector) {
-      try {
-        const anchorsBySelect = document.querySelectorAll<HTMLElement>(selector)
-        anchorsBySelect.forEach((anchor) => {
-          elementRefs.add({ current: anchor })
-        })
-      } catch {
-        if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`)
+      let selector = anchorSelect
+      if (!selector && id) {
+        selector = `[data-tooltip-id='${id}']`
+      }
+      if (selector) {
+        try {
+          const anchorsBySelect = root.querySelectorAll<HTMLElement>(selector)
+          anchorsBySelect.forEach((anchor) => {
+            elementRefs.add({ current: anchor })
+          })
+        } catch {
+          if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`)
+          }
         }
       }
-    }
 
-    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
-    if (anchorById) {
-      elementRefs.add({ current: anchorById })
-    }
+      const anchorById = root.querySelector<HTMLElement>(`[id='${anchorId}']`)
+      if (anchorById) {
+        elementRefs.add({ current: anchorById })
+      }
 
-    if (!elementRefs.size) {
-      return () => null
-    }
+      if (!elementRefs.size) {
+        return () => null
+      }
 
-    const anchorElement = activeAnchor ?? anchorById ?? providerActiveAnchor.current
+      const anchorElement = activeAnchor ?? anchorById ?? providerActiveAnchor.current
 
-    const observerCallback: MutationCallback = (mutationList) => {
-      mutationList.forEach((mutation) => {
-        if (
-          !anchorElement ||
-          mutation.type !== 'attributes' ||
-          !mutation.attributeName?.startsWith('data-tooltip-')
-        ) {
-          return
-        }
-        // make sure to get all set attributes, since all unset attributes are reset
-        const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
-        applyAllDataAttributesFromAnchorElement(dataAttributes)
-      })
-    }
+      const observerCallback: MutationCallback = (mutationList) => {
+        mutationList.forEach((mutation) => {
+          if (
+            !anchorElement ||
+            mutation.type !== 'attributes' ||
+            !mutation.attributeName?.startsWith('data-tooltip-')
+          ) {
+            return
+          }
+          // make sure to get all set attributes, since all unset attributes are reset
+          const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
+          applyAllDataAttributesFromAnchorElement(dataAttributes)
+        })
+      }
 
-    // Create an observer instance linked to the callback function
-    const observer = new MutationObserver(observerCallback)
+      // Create an observer instance linked to the callback function
+      const observer = new MutationObserver(observerCallback)
 
-    // do not check for subtree and childrens, we only want to know attribute changes
-    // to stay watching `data-attributes-*` from anchor element
-    const observerConfig = { attributes: true, childList: false, subtree: false }
+      // do not check for subtree and childrens, we only want to know attribute changes
+      // to stay watching `data-attributes-*` from anchor element
+      const observerConfig = { attributes: true, childList: false, subtree: false }
 
-    if (anchorElement) {
-      const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
-      applyAllDataAttributesFromAnchorElement(dataAttributes)
-      // Start observing the target node for configured mutations
-      observer.observe(anchorElement, observerConfig)
-    }
+      if (anchorElement) {
+        const dataAttributes = getDataAttributesFromAnchorElement(anchorElement)
+        applyAllDataAttributesFromAnchorElement(dataAttributes)
+        // Start observing the target node for configured mutations
+        observer.observe(anchorElement, observerConfig)
+      }
 
-    return () => {
-      // Remove the observer when the tooltip is destroyed
-      observer.disconnect()
+      return () => {
+        // Remove the observer when the tooltip is destroyed
+        observer.disconnect()
+      }
     }
-  }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
+    return () => null
+  }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect, isShadowChecked])
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
@@ -304,6 +301,9 @@ const TooltipController = ({
     renderedContent = <TooltipContent content={tooltipHtml} />
   }
 
+  /** Render an empty div to check the shadow DOM existance or not, remove the div after check */
+  const renderCheck = () => (isShadowChecked ? null : <div ref={shadowCheckRef} />)
+
   const props: ITooltip = {
     id,
     anchorId,
@@ -312,6 +312,7 @@ const TooltipController = ({
     classNameArrow,
     content: renderedContent,
     contentWrapperRef,
+    root,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,
@@ -341,7 +342,12 @@ const TooltipController = ({
     setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor),
   }
 
-  return <Tooltip {...props} />
+  return (
+    <>
+      <Tooltip {...props} />
+      {renderCheck()}
+    </>
+  )
 }
 
 export default TooltipController
diff --git a/src/index-dev.tsx b/src/index-dev.tsx
index 257d3242..fee55d8c 100644
--- a/src/index-dev.tsx
+++ b/src/index-dev.tsx
@@ -6,4 +6,5 @@ import './tokens.css'
 // eslint-disable-next-line no-console
 console.log('Parent folder loaded react version: ', version)
 
+// ReactDOM.render(<App />, document.getElementById('app')!.attachShadow({ mode: 'open' }))
 ReactDOM.render(<App />, document.getElementById('app'))
