Styling React components and ShadowDOM usage

export const getRootContainer = async (): Promise<HTMLDivElement> => {
  const body = document.querySelector("body")
  const container = document.createElement("div")
  container.style.cssText = `
    z-index: 9999;
    position: absolute;
  `
  body.appendChild(await getStyle())
  body.appendChild(container)

  return container
}

export const getRootContainer = async (): Promise<HTMLDivElement> => {
  const body = document.querySelector("body")
  const container = document.createElement("div")
  container.style.cssText = `
    z-index: 9999;
    position: absolute;
  `
  body.appendChild(await getStyle())
  body.appendChild(container)

  return container
}

import React from "react"

import "./this-component-style.scss"

const ExampleComponent = () => {
    return (
        <span className="example-class">This is a test!</span>
    )
}

import React from "react"

import "./this-component-style.scss"

const ExampleComponent = () => {
    return (
        <span className="example-class">This is a test!</span>
    )
}

.example-class {
  color: red;
}

.example-class {
  color: red;
}