Merge branch 'main' into cb/install-dependencies-in-ts

stenciljs · Aug 6, 2024 · 343695d · 343695d
2 parents ba62f84 + 277e3e3
commit 343695d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,9 @@
 * **testing:** update Jest types ([#5910](https://github.com/ionic-team/stencil/issues/5910)) ([5f8c969](https://github.com/ionic-team/stencil/commit/5f8c9692d41b58d3706c61db9a33215294e70049)), fixes [#5908](https://github.com/ionic-team/stencil/issues/5908)
 * **core:** update TypeScript to v5.5 ([#5898](https://github.com/ionic-team/stencil/issues/5898)) ([5e74837](https://github.com/ionic-team/stencil/commit/5e748378fd14fa5c6aaf0e001e8763a0ba3cf57c))
 
+### Note
+
+As we’ve made further enhancements to support declarative Shadow DOM, the Stencil team has determined that it’s not feasible to allow users to render a shadow component as a scoped component after compilation, such as by calling `renderToString` with `serializeShadowRoot: false`. This is because Stencil compiles styles for either shadow or scoped mode during the compilation process, embedding these styles into the hydrate module. Once this compilation is complete, the styles cannot be transformed to support the other mode. Recognizing that this change would impact the current functionality, the Stencil team has decided to proceed with this update. Moving forward, we recommend serializing all components marked with shadow: true as declarative Shadow DOM.
 
 
 ## 🏉 [4.19.2](https://github.com/ionic-team/stencil/compare/v4.19.1...v4.19.2) (2024-07-02)

diff --git a/renovate.json5 b/renovate.json5
@@ -72,6 +72,12 @@
       matchPackageNames: ['eslint'],
       allowedVersions: '<9.0.0',
     },
+    {
+      // TODO(STENCIL-1274): Remove this block
+      // disable Eslint plugin updates until we have updated Eslint to v9
+      matchPackageNames: ['@typescript-eslint/eslint-plugin', '@typescript-eslint/parser'],
+      allowedVersions: '<8.0.0',
+    },
     {
       matchPackagePrefixes: ['@typescript-eslint'],
       groupName: 'TypeScript-ESLint',

diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
@@ -943,10 +943,10 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
    */
   removeHtmlComments?: boolean;
   /**
-   * If set to `false` Stencil will ignore the fact that a component has a `shadow: true`
-   * flag and serializes it as a scoped component. If set to `true` the component will
-   * be rendered within a Declarative Shadow DOM.
-   * @default false
+   * If set to `true` the component will be rendered within a Declarative Shadow DOM.
+   * If set to `false` Stencil will ignore the contents of the shadow root and render the
+   * element as given in provided template.
+   * @default true
    */
   serializeShadowRoot?: boolean;
   /**

diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts
@@ -92,19 +92,17 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           }
 
           /**
-           * only attach style tag to <head /> section if:
+           * attach styles at the end of the head tag if we render shadow components
            */
-          const injectStyle =
-            /**
-             * we render a scoped component
-             */
-            !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) ||
-            /**
-             * we are using shadow dom and render the style tag within the shadowRoot
-             */
-            (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation && styleContainerNode.nodeName !== 'HEAD');
-          if (injectStyle) {
-            styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+          if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
+            styleContainerNode.append(styleElm);
+          }
+
+          /**
+           * attach styles at the beginning of a shadow root node if we render shadow components
+           */
+          if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation && styleContainerNode.nodeName !== 'HEAD') {
+            styleContainerNode.insertBefore(styleElm);
           }
         }
 

diff --git a/test/end-to-end/src/miscellaneous/renderToString.e2e.ts b/test/end-to-end/src/miscellaneous/renderToString.e2e.ts
@@ -49,6 +49,37 @@ describe('renderToString', () => {
     );
   });
 
+  it('puts style last in the head tag', async () => {
+    const { html } = await renderToString(
+      `<html>
+      <head>
+        <link rel="preconnect" href="https://some-url.com" />
+      </head>
+
+      <body>
+        <div class="__next">
+          <main>
+            <scoped-car-list cars=${JSON.stringify([vento, beetle])}></scoped-car-list>
+          </main>
+        </div>
+
+        <script type="module">
+            import { defineCustomElements } from "./static/loader/index.js";
+            defineCustomElements().catch(console.error);
+        </script>
+      </body>
+      </html>`,
+      { fullDocument: true, serializeShadowRoot: false },
+    );
+
+    expect(html).toContain(
+      '<link rel="preconnect" href="https://some-url.com"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{',
+    );
+    expect(html).toContain(
+      '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style></head> <body> <div class="__next"> <main> <scoped-car-list cars',
+    );
+  });
+
   it('allows to hydrate whole HTML page with using a scoped component', async () => {
     const { html } = await renderToString(
       `<html>
@@ -79,7 +110,7 @@ describe('renderToString', () => {
      * renders hydration styles and custom link tag within the head tag
      */
     expect(html).toContain(
-      '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><link rel="stylesheet" href="whatever.css"> </head> <body> <div class="__next"> <main> <scoped-car-list cars=',
+      '<link rel="stylesheet" href="whatever.css"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}ul.sc-scoped-car-list{display:block;margin:0;padding:0}li.sc-scoped-car-list{list-style:none;margin:0;padding:20px}.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style></head> <body> <div class="__next"> <main> <scoped-car-list cars=',
     );
   });
 });