Add the actual support for injecting styles into a shadowRoot

vuejs · tcnijmeijer · Jul 6, 2021 · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021
commit 9deb088fdf9ea90d4439792609c4736b0f87bdaf
diff --git a/src/styleInjection.ts b/src/styleInjection.ts
@@ -1,30 +1,33 @@
 interface ComponentOptions {
  beforeMount?(): void
  __cssBlocks: Record<string, CSSBlock>
+  shadowRoot?: HTMLElement
 }

 interface ComponentInstance {
  $options: ComponentOptions
+  $root: ComponentInstance
 }

 interface CSSBlock {
  id: string
 }

-function getStyleElement(id: string) {
-  var existing = document.querySelector("[data-style-id='" + id + "']")
+function getStyleElement(id: string, parent: HTMLElement) {
+  var existing = parent.querySelector("[data-style-id='" + id + "']")
  if (existing) return existing

  var styleElement = document.createElement('style')
  styleElement.setAttribute('data-style-id', id)
  styleElement.setAttribute('type', 'text/css')
-  document.head.appendChild(styleElement)
+  parent.appendChild(styleElement)
  return styleElement
 }

 function injectStyles(component: ComponentInstance) {
+  const parent = component.$root.$options.shadowRoot || document.head
  Object.values(component.$options.__cssBlocks).forEach(function (cssBlock) {
-    var styleElement = getStyleElement(cssBlock.id)
+    var styleElement = getStyleElement(cssBlock.id, parent)
    styleElement.innerHTML = cssBlock.toString()
  })
 }

diff --git a/test/fixtures/shadow-root-injection.js b/test/fixtures/shadow-root-injection.js
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+
+import Component from './basic.vue'
+
+if (typeof window !== 'undefined') {
+  const container = window.document.getElementById('#app')
+  const shadowRoot = container.attachShadow({ mode: 'open' })
+
+  Component.shadowRoot = shadowRoot
+
+  const app = createApp(Component)
+  window.instance = app.mount(shadowRoot)
+}
+
+export default Component
diff --git a/test/style.spec.ts b/test/style.spec.ts
@@ -193,4 +193,18 @@ test('CSS Modules Extend', async () => {
  expect(style).toContain(`.${instance.$style.red} {\n  color: #FF0000;\n}`)
 })

+test('shadow root injection', async () => {
+  const { window, instance } = await mockBundleAndRun({
+    entry: './test/fixtures/shadow-root-injection.js',
+  })
+
+  const headStyles = window.document.head.querySelectorAll('style')
+  expect(headStyles.length).toBe(0)
+
+  const shadowStyles = instance.$options.shadowRoot.querySelectorAll('style')
+  expect(shadowStyles.length).toBe(1)
+
+  expect(shadowStyles[0].innerHTML).toContain('comp-a h2 {\n  color: #f00;\n}')
+})
+
 test.todo('experimental <style vars>')