Skip to content

Commit 754e91b

Browse files
cezaraugustocezaraugusto
committed
Full shadow DOM support
1 parent fb1b9e1 commit 754e91b

File tree

4 files changed

+71
-52
lines changed

4 files changed

+71
-52
lines changed

‎programs/develop/webpack/plugin-css/common-style-loaders.ts

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,52 +10,59 @@ export interface StyleLoaderOptions {
1010
mode: DevOptions['mode']
1111
useMiniCssExtractPlugin: boolean
1212
loader?: string
13+
useShadowDom: boolean
1314
}
1415

15-
// function whereToInsertStyleTag(element: HTMLElement) {
16-
// // Function to check if the shadow root exists
17-
// const insertElement = () => {
18-
// // @ts-expect-error - global reference.
19-
// const shadowRoot = window.__EXTENSION_SHADOW_ROOT__
16+
function whereToInsertStyleTag(element: HTMLElement) {
17+
// Function to insert the style tag
18+
const insertElement = () => {
19+
// @ts-expect-error - global reference.
20+
const shadowRoot = window.__EXTENSION_SHADOW_ROOT__
2021

21-
// if (shadowRoot) {
22-
// shadowRoot.appendChild(element)
22+
if (shadowRoot) {
23+
shadowRoot.appendChild(element)
24+
console.log('Element inserted into shadowRoot')
25+
} else {
26+
document.head.appendChild(element)
27+
console.log('Element inserted into document.head')
28+
}
29+
}
30+
31+
// If the shadowRoot is already available, insert immediately
32+
// @ts-expect-error - global reference.
33+
if (window.__EXTENSION_SHADOW_ROOT__) {
34+
insertElement()
35+
return
36+
}
2337

24-
// if (process.env.EXTENSION_ENV === 'development') {
25-
// console.log('Element inserted into shadowRoot')
26-
// }
27-
// } else {
28-
// document.head.appendChild(element)
29-
// if (process.env.EXTENSION_ENV === 'development') {
30-
// console.log('Element inserted into document.head')
31-
// }
32-
// }
33-
// }
38+
// Default behavior if MutationObserver is not required
39+
if (!MutationObserver) {
40+
document.head.appendChild(element)
41+
return
42+
}
3443

35-
// // If the shadowRoot is already available, insert immediately
36-
// // @ts-expect-error - global reference.
37-
// if (window.__EXTENSION_SHADOW_ROOT__) {
38-
// insertElement()
39-
// return
40-
// }
44+
// Use MutationObserver to wait for the shadow root to be available
45+
const observer = new MutationObserver(() => {
46+
// @ts-expect-error - global reference.
47+
if (window.__EXTENSION_SHADOW_ROOT__) {
48+
insertElement()
49+
observer.disconnect() // Stop observing once the shadow root is found
50+
}
51+
})
4152

42-
// // Use MutationObserver to wait for the shadow root to be available
43-
// const observer = new MutationObserver(() => {
44-
// // @ts-expect-error - global reference.
45-
// if (window.__EXTENSION_SHADOW_ROOT__) {
46-
// insertElement()
47-
// observer.disconnect() // Stop observing once the shadow root is found
48-
// } else {
49-
// // Disconnect the observer if the shadow root is not found after 5 seconds
50-
// setTimeout(() => {
51-
// observer.disconnect()
52-
// }, 5000)
53-
// }
54-
// })
53+
// Observe changes to the `document.body` or `document.head`
54+
observer.observe(document.body, {childList: true, subtree: true})
5555

56-
// // Observe changes to the `document.body` or `document.head`
57-
// observer.observe(document.body, {childList: true, subtree: true})
58-
// }
56+
// Set a timeout to fallback to `document.head` after 5 seconds
57+
setTimeout(() => {
58+
observer.disconnect() // Stop observing after timeout
59+
// @ts-expect-error - global reference.
60+
if (!window.__EXTENSION_SHADOW_ROOT__) {
61+
document.head.appendChild(element)
62+
console.log('Fallback: Element inserted into document.head after timeout')
63+
}
64+
}, 3000)
65+
}
5966

6067
export async function commonStyleLoaders(
6168
projectPath: string,
@@ -67,9 +74,11 @@ export async function commonStyleLoaders(
6774
? miniCssLoader
6875
: {
6976
loader: require.resolve('style-loader'),
70-
// options: {
71-
// insert: whereToInsertStyleTag
72-
// }
77+
options:
78+
(opts.useShadowDom && {
79+
insert: whereToInsertStyleTag
80+
}) ||
81+
undefined
7382
},
7483
{
7584
loader: require.resolve('css-loader'),

‎programs/develop/webpack/plugin-css/css-tools/less.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,16 @@ export async function maybeUseLess(
6363
use: await commonStyleLoaders(projectPath, {
6464
loader: 'less-loader',
6565
mode,
66-
useMiniCssExtractPlugin: false
66+
useMiniCssExtractPlugin: false,
67+
useShadowDom: true
6768
})
6869
},
6970
{
7071
use: await commonStyleLoaders(projectPath, {
7172
loader: 'less-loader',
7273
mode,
73-
useMiniCssExtractPlugin: mode === 'production'
74+
useMiniCssExtractPlugin: mode === 'production',
75+
useShadowDom: false
7476
})
7577
}
7678
]

‎programs/develop/webpack/plugin-css/css-tools/sass.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,16 @@ export async function maybeUseSass(
7474
use: await commonStyleLoaders(projectPath, {
7575
loader: 'sass-loader',
7676
mode,
77-
useMiniCssExtractPlugin: false
77+
useMiniCssExtractPlugin: false,
78+
useShadowDom: true
7879
})
7980
},
8081
{
8182
use: await commonStyleLoaders(projectPath, {
8283
loader: 'sass-loader',
8384
mode,
84-
useMiniCssExtractPlugin: mode === 'production'
85+
useMiniCssExtractPlugin: mode === 'production',
86+
useShadowDom: true
8587
})
8688
}
8789
]
@@ -94,14 +96,16 @@ export async function maybeUseSass(
9496
use: await commonStyleLoaders(projectPath, {
9597
loader: 'sass-loader',
9698
mode,
97-
useMiniCssExtractPlugin: false
99+
useMiniCssExtractPlugin: false,
100+
useShadowDom: true
98101
})
99102
},
100103
{
101104
use: await commonStyleLoaders(projectPath, {
102105
loader: 'sass-loader',
103106
mode,
104-
useMiniCssExtractPlugin: mode === 'production'
107+
useMiniCssExtractPlugin: mode === 'production',
108+
useShadowDom: true
105109
})
106110
}
107111
]

‎programs/develop/webpack/plugin-css/index.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,15 @@ export class CssPlugin {
4040
resourceQuery: /inline_style/,
4141
use: await commonStyleLoaders(projectPath, {
4242
mode: mode as 'development' | 'production',
43-
useMiniCssExtractPlugin: false
43+
useMiniCssExtractPlugin: false,
44+
useShadowDom: true
4445
})
4546
},
4647
{
4748
use: await commonStyleLoaders(projectPath, {
4849
mode: mode as 'development' | 'production',
49-
useMiniCssExtractPlugin: mode === 'production'
50+
useMiniCssExtractPlugin: mode === 'production',
51+
useShadowDom: false
5052
})
5153
}
5254
]
@@ -58,13 +60,15 @@ export class CssPlugin {
5860
resourceQuery: /inline_style/,
5961
use: await commonStyleLoaders(projectPath, {
6062
mode: mode as 'development' | 'production',
61-
useMiniCssExtractPlugin: false
63+
useMiniCssExtractPlugin: false,
64+
useShadowDom: true
6265
})
6366
},
6467
{
6568
use: await commonStyleLoaders(projectPath, {
6669
mode: mode as 'development' | 'production',
67-
useMiniCssExtractPlugin: mode === 'production'
70+
useMiniCssExtractPlugin: mode === 'production',
71+
useShadowDom: false
6872
})
6973
}
7074
]

0 commit comments

Comments
 (0)