chore: warn style injection in shadowRoot: false mode

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index add209257460c0cc4da67380776db3cd723f076d..bb73feccfffe21a6f3155b65a88e06681718cd9b 100644 (file)
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -312,6 +312,12 @@ export class VueElement extends BaseClass {
       }
 
       // apply CSS
+      if (__DEV__ && styles && def.shadowRoot === false) {
+        warn(
+          'Custom element style injection is not supported when using ' +
+            'shadowRoot: false',
+        )
+      }
       this._applyStyles(styles)
 
       // initial render
@@ -481,11 +487,13 @@ export class VueElement extends BaseClass {
   }
 
   private _applyStyles(styles: string[] | undefined) {
+    const root = this.shadowRoot
+    if (!root) return
     if (styles) {
       styles.forEach(css => {
         const s = document.createElement('style')
         s.textContent = css
-        this._root.appendChild(s)
+        root.appendChild(s)
         // record for HMR
         if (__DEV__) {
           ;(this._styles || (this._styles = [])).push(s)