fix(runtime): replace innerHTML with textContent for CSS injection (

#5207)

* fix(runtime): replace `innerHTML` with `textContent` for CSS injection

This commit addresses security and performance concerns associated with using `innerHTML` for injecting CSS into `<style>` elements in `bootstrap-lazy.ts`.

By switching to `textContent`, the risk of executing malicious scripts is mitigated and performance is improved due to the avoidance of HTML parsing. This change enhances the security and efficiency of Stencil's component initialisation process, particularly in environments with strict security policies like browser extensions, without impacting functionality in standard web applications.

fixes: #5206

Signed-off-by: Theodore GARSON <theodore.corbeaux@gmail.com>

* Update bootstrap-lazy.ts

---------

Signed-off-by: Theodore GARSON <theodore.corbeaux@gmail.com>
Co-authored-by: Alice Pote <alice.writes.wrongs@gmail.com>
Co-authored-by: Alice Pote <alice.octavia.pote@gmail.com>

src/runtime/bootstrap-lazy.ts

@@ -201,12 +201,12 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
   if (cmpTags.length > 0) {
     // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
     if (hasSlotRelocation) {
-      dataStyles.innerHTML += SLOT_FB_CSS;
+      dataStyles.textContent += SLOT_FB_CSS;
     }
 
     // Add hydration styles
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
-      dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+      dataStyles.textContent += cmpTags + HYDRATED_CSS;
     }
 
     // If we have styles, add them to the DOM