fix(runtime): properly set scope classes

src/runtime/styles.ts

@@ -186,12 +186,7 @@ export const attachStyles = (hostRef: d.HostRef) => {
     hostRef.$modeName$,
   );
 
-  if (
-    (BUILD.shadowDom || BUILD.scoped) &&
-    BUILD.cssAnnotations &&
-    ((flags & CMP_FLAGS.needsScopedEncapsulation && flags & CMP_FLAGS.scopedCssEncapsulation) ||
-      flags & CMP_FLAGS.shadowNeedsScopedCss)
-  ) {
+  if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & CMP_FLAGS.needsScopedEncapsulation) {
     // only required when we're NOT using native shadow dom (slot)
     // or this browser doesn't support native shadow dom
     // and this host element was NOT created with SSR

src/runtime/test/shadow.spec.tsx

@@ -84,16 +84,16 @@ describe('shadow', () => {
     });
 
     const expected = `
-    <cmp-a class="hydrated">
+    <cmp-a class="hydrated sc-cmp-a-h">
       <!---->
-      <div>
+      <div class=\"sc-cmp-a sc-cmp-a-s\">
         <span slot=\"start\">
           Start
         </span>
-        <span>
+        <span class=\"sc-cmp-a sc-cmp-a-s\">
           Text
         </span>
-        <div class="end">
+        <div class="end sc-cmp-a sc-cmp-a-s">
           <span slot=\"end\">
             End
           </span>

test/end-to-end/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "node ../../bin/stencil build --config ./stencil.build.config.ts --docs",
     "start": "node ../../bin/stencil build --debug --watch --dev --serve",
-    "test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug",
+    "test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug -u",
     "test.dist": "npm run build && node test-end-to-end-dist.js && node test-end-to-end-hydrate.js && npm run test.exportMap",
     "test.e2e": "node ../../bin/stencil test --e2e",
     "test.exportMap": "node ./exportMap/index.js && tsx ./exportMap/index.mts",

test/end-to-end/src/declarative-shadow-dom/__snapshots__/test.e2e.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderToString can render a scoped component within a shadow component 1`] = `"<car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" custom-hydrate-flag=\\"\\" s-id=\\"9\\"><template shadowrootmode=\\"open\\"><style>:host{display:block;margin:10px;padding:10px;border:1px solid blue}ul{display:block;margin:0;padding:0}li{list-style:none;margin:0;padding:20px}.selected{font-weight:bold;background:rgb(255, 255, 210)}</style><ul c-id=\\"9.0.0.0\\"><li c-id=\\"9.1.1.0\\"><car-detail custom-hydrate-flag=\\"\\" c-id=\\"9.2.2.0\\" s-id=\\"10\\"><!--r.10--><section c-id=\\"10.0.0.0\\"><!--t.10.1.1.0-->2024 VW Vento</section></car-detail></li><li c-id=\\"9.3.1.1\\"><car-detail custom-hydrate-flag=\\"\\" c-id=\\"9.4.2.0\\" s-id=\\"11\\"><!--r.11--><section c-id=\\"11.0.0.0\\"><!--t.11.1.1.0-->2023 VW Beetle</section></car-detail></li></ul></template><!--r.9--></car-list>"`;
+exports[`renderToString can render a scoped component within a shadow component 1`] = `"<car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"9\\"><template shadowrootmode=\\"open\\"><style>:host{display:block;margin:10px;padding:10px;border:1px solid blue}ul{display:block;margin:0;padding:0}li{list-style:none;margin:0;padding:20px}.selected{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-car-list\\" c-id=\\"9.0.0.0\\"><li class=\\"sc-car-list\\" c-id=\\"9.1.1.0\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"9.2.2.0\\" s-id=\\"10\\"><!--r.10--><section c-id=\\"10.0.0.0\\"><!--t.10.1.1.0-->2024 VW Vento</section></car-detail></li><li class=\\"sc-car-list\\" c-id=\\"9.3.1.1\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"9.4.2.0\\" s-id=\\"11\\"><!--r.11--><section c-id=\\"11.0.0.0\\"><!--t.11.1.1.0-->2023 VW Beetle</section></car-detail></li></ul></template><!--r.9--></car-list>"`;
 
 exports[`renderToString can render a simple shadow component 1`] = `
-"<another-car-detail custom-hydrate-flag=\\"\\" s-id=\\"1\\">
+"<another-car-detail class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\">
   <template shadowrootmode=\\"open\\">
     <style>
       section{color:green}
@@ -14,33 +14,33 @@ exports[`renderToString can render a simple shadow component 1`] = `
 `;
 
 exports[`renderToString can render nested components 1`] = `
-"<another-car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" custom-hydrate-flag=\\"\\" s-id=\\"6\\">
+"<another-car-list cars=\\"[{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024},{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Beetle&quot;,&quot;year&quot;:2023}]\\" class=\\"sc-another-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"6\\">
   <template shadowrootmode=\\"open\\">
     <style>
       :host{display:block;margin:10px;padding:10px;border:1px solid blue}ul{display:block;margin:0;padding:0}li{list-style:none;margin:0;padding:20px}.selected{font-weight:bold;background:rgb(255, 255, 210)}
     </style>
-    <ul c-id=\\"6.0.0.0\\">
-      <li c-id=\\"6.1.1.0\\">
-        <another-car-detail c-id=\\"6.2.2.0\\" custom-hydrate-flag=\\"\\" s-id=\\"7\\">
+    <ul c-id=\\"6.0.0.0\\" class=\\"sc-another-car-list\\">
+      <li c-id=\\"6.1.1.0\\" class=\\"sc-another-car-list\\">
+        <another-car-detail c-id=\\"6.2.2.0\\" class=\\"sc-another-car-detail-h sc-another-car-list\\" custom-hydrate-flag=\\"\\" s-id=\\"7\\">
           <template shadowrootmode=\\"open\\">
             <style>
               section{color:green}
             </style>
-            <section c-id=\\"7.0.0.0\\">
+            <section c-id=\\"7.0.0.0\\" class=\\"sc-another-car-detail\\">
               <!--t.7.1.1.0-->
               2024 VW Vento
             </section>
           </template>
           <!--r.7-->
         </another-car-detail>
       </li>
-      <li c-id=\\"6.3.1.1\\">
-        <another-car-detail c-id=\\"6.4.2.0\\" custom-hydrate-flag=\\"\\" s-id=\\"8\\">
+      <li c-id=\\"6.3.1.1\\" class=\\"sc-another-car-list\\">
+        <another-car-detail c-id=\\"6.4.2.0\\" class=\\"sc-another-car-detail-h sc-another-car-list\\" custom-hydrate-flag=\\"\\" s-id=\\"8\\">
           <template shadowrootmode=\\"open\\">
             <style>
               section{color:green}
             </style>
-            <section c-id=\\"8.0.0.0\\">
+            <section c-id=\\"8.0.0.0\\" class=\\"sc-another-car-detail\\">
               <!--t.8.1.1.0-->
               2023 VW Beetle
             </section>
@@ -55,12 +55,12 @@ exports[`renderToString can render nested components 1`] = `
 `;
 
 exports[`renderToString supports passing props to components 1`] = `
-"<another-car-detail car=\\"{&quot;year&quot;:2024, &quot;make&quot;: &quot;VW&quot;, &quot;model&quot;: &quot;Vento&quot;}\\" custom-hydrate-flag=\\"\\" s-id=\\"2\\">
+"<another-car-detail car=\\"{&quot;year&quot;:2024, &quot;make&quot;: &quot;VW&quot;, &quot;model&quot;: &quot;Vento&quot;}\\" class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"2\\">
   <template shadowrootmode=\\"open\\">
     <style>
       section{color:green}
     </style>
-    <section c-id=\\"2.0.0.0\\">
+    <section c-id=\\"2.0.0.0\\" class=\\"sc-another-car-detail\\">
       <!--t.2.1.1.0-->
       2024 VW Vento
     </section>
@@ -70,12 +70,12 @@ exports[`renderToString supports passing props to components 1`] = `
 `;
 
 exports[`renderToString supports passing props to components with a simple object 1`] = `
-"<another-car-detail car=\\"{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024}\\" custom-hydrate-flag=\\"\\" s-id=\\"3\\">
+"<another-car-detail car=\\"{&quot;make&quot;:&quot;VW&quot;,&quot;model&quot;:&quot;Vento&quot;,&quot;year&quot;:2024}\\" class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"3\\">
   <template shadowrootmode=\\"open\\">
     <style>
       section{color:green}
     </style>
-    <section c-id=\\"3.0.0.0\\">
+    <section c-id=\\"3.0.0.0\\" class=\\"sc-another-car-detail\\">
       <!--t.3.1.1.0-->
       2024 VW Vento
     </section>

test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

@@ -105,7 +105,7 @@ describe('renderToString', () => {
         fullDocument: false,
       },
     );
-    expect(html).toContain('<section c-id="4.0.0.0"><!--t.4.1.1.0--> </section>');
+    expect(html).toContain('<section class="sc-another-car-detail" c-id="4.0.0.0"><!--t.4.1.1.0--> </section>');
   });
 
   it('supports styles for DSD', async () => {
@@ -145,10 +145,10 @@ describe('renderToString', () => {
     });
     expect(html).toMatchSnapshot();
     expect(html).toContain(
-      `<car-detail custom-hydrate-flag=\"\" c-id=\"9.2.2.0\" s-id=\"10\"><!--r.10--><section c-id=\"10.0.0.0\"><!--t.10.1.1.0-->2024 VW Vento</section></car-detail>`,
+      `<car-detail class=\"sc-car-list\" custom-hydrate-flag=\"\" c-id=\"9.2.2.0\" s-id=\"10\"><!--r.10--><section c-id=\"10.0.0.0\"><!--t.10.1.1.0-->2024 VW Vento</section></car-detail>`,
     );
     expect(html).toContain(
-      `<car-detail custom-hydrate-flag=\"\" c-id=\"9.4.2.0\" s-id=\"11\"><!--r.11--><section c-id=\"11.0.0.0\"><!--t.11.1.1.0-->2023 VW Beetle</section></car-detail>`,
+      `<car-detail class=\"sc-car-list\" custom-hydrate-flag=\"\" c-id=\"9.4.2.0\" s-id=\"11\"><!--r.11--><section c-id=\"11.0.0.0\"><!--t.11.1.1.0-->2023 VW Beetle</section></car-detail>`,
     );
   });
 
@@ -161,18 +161,18 @@ describe('renderToString', () => {
 
     const resultRenderToString = await readableToString(renderToString(input, opts, true));
     expect(resultRenderToString).toContain(
-      '<car-detail custom-hydrate-flag="" c-id="12.2.2.0" s-id="13"><!--r.13--><section c-id="13.0.0.0"><!--t.13.1.1.0-->2024 VW Vento</section></car-detail>',
+      '<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="12.2.2.0" s-id="13"><!--r.13--><section c-id="13.0.0.0"><!--t.13.1.1.0-->2024 VW Vento</section></car-detail>',
     );
     expect(resultRenderToString).toContain(
-      '<car-detail custom-hydrate-flag="" c-id="12.4.2.0" s-id="14"><!--r.14--><section c-id="14.0.0.0"><!--t.14.1.1.0-->2023 VW Beetle</section></car-detail>',
+      '<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="12.4.2.0" s-id="14"><!--r.14--><section c-id="14.0.0.0"><!--t.14.1.1.0-->2023 VW Beetle</section></car-detail>',
     );
 
     const resultStreamToString = await readableToString(streamToString(input, opts));
     expect(resultStreamToString).toContain(
-      '<car-detail custom-hydrate-flag="" c-id="15.2.2.0" s-id="16"><!--r.16--><section c-id="16.0.0.0"><!--t.16.1.1.0-->2024 VW Vento</section></car-detail>',
+      '<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="15.2.2.0" s-id="16"><!--r.16--><section c-id="16.0.0.0"><!--t.16.1.1.0-->2024 VW Vento</section></car-detail>',
     );
     expect(resultStreamToString).toContain(
-      '<car-detail custom-hydrate-flag="" c-id="15.4.2.0" s-id="17"><!--r.17--><section c-id="17.0.0.0"><!--t.17.1.1.0-->2023 VW Beetle</section></car-detail>',
+      '<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="15.4.2.0" s-id="17"><!--r.17--><section c-id="17.0.0.0"><!--t.17.1.1.0-->2023 VW Beetle</section></car-detail>',
     );
   });
 
@@ -242,7 +242,7 @@ describe('renderToString', () => {
      * ```
      */
     expect(html).toContain(
-      `<dsd-listen-cmp custom-hydrate-flag=\"\" s-id=\"21\"><template shadowrootmode=\"open\"><style>:host{display:block}</style><slot c-id=\"21.0.0.0\"></slot></template><!--r.21-->Hello World</dsd-listen-cmp>`,
+      `<dsd-listen-cmp class=\"sc-dsd-listen-cmp-h\" custom-hydrate-flag=\"\" s-id=\"21\"><template shadowrootmode=\"open\"><style>:host{display:block}</style><slot class=\"sc-dsd-listen-cmp\" c-id=\"21.0.0.0\"></slot></template><!--r.21-->Hello World</dsd-listen-cmp>`,
     );
 
     /**
@@ -257,7 +257,7 @@ describe('renderToString', () => {
      * </car-detail>
      */
     expect(html).toContain(
-      `<car-detail custom-hydrate-flag=\"\" c-id=\"22.4.2.0\" s-id=\"24\"><!--r.24--><section c-id=\"24.0.0.0\"><!--t.24.1.1.0-->2023 VW Beetle</section></car-detail>`,
+      `<car-detail class=\"sc-car-list\" custom-hydrate-flag=\"\" c-id=\"22.4.2.0\" s-id=\"24\"><!--r.24--><section c-id=\"24.0.0.0\"><!--t.24.1.1.0-->2023 VW Beetle</section></car-detail>`,
     );
 
     const page = await newE2EPage({ html, url: 'https://stencil.com' });
@@ -284,15 +284,19 @@ describe('renderToString', () => {
       serializeShadowRoot: false,
       fullDocument: false,
     });
-    expect(html).toBe('<another-car-detail custom-hydrate-flag="" s-id="25"><!--r.25--></another-car-detail>');
+    expect(html).toBe(
+      '<another-car-detail class="sc-another-car-detail-h" custom-hydrate-flag="" s-id="25"><!--r.25--></another-car-detail>',
+    );
   });
 
   it('does not render a shadow component but its light dom', async () => {
     const { html } = await renderToString('<cmp-with-slot>Hello World</cmp-with-slot>', {
       serializeShadowRoot: false,
       fullDocument: false,
     });
-    expect(html).toBe('<cmp-with-slot custom-hydrate-flag="" s-id="26"><!--r.26-->Hello World</cmp-with-slot>');
+    expect(html).toBe(
+      '<cmp-with-slot class="sc-cmp-with-slot-h" custom-hydrate-flag="" s-id="26"><!--r.26-->Hello World</cmp-with-slot>',
+    );
   });
 
   describe('modes in declarative shadow dom', () => {
@@ -344,30 +348,30 @@ describe('renderToString', () => {
         prettyHtml: true,
       },
     );
-    expect(html).toBe(`<nested-cmp-parent custom-hydrate-flag="" s-id="29">
+    expect(html).toBe(`<nested-cmp-parent class="sc-nested-cmp-parent-h" custom-hydrate-flag="" s-id="29">
   <template shadowrootmode="open">
     <style>
       .sc-nested-scope-cmp-h{color:green}:host{display:inline-block}
     </style>
-    <div c-id="29.0.0.0" class="some-class">
-      <nested-scope-cmp c-id="29.1.1.0" class="sc-nested-scope-cmp-h" custom-hydrate-flag="" s-id="31">
+    <div c-id="29.0.0.0" class="sc-nested-cmp-parent some-class">
+      <nested-scope-cmp c-id="29.1.1.0" class="sc-nested-cmp-parent sc-nested-scope-cmp-h" custom-hydrate-flag="" s-id="31">
         <!--r.31-->
         <!--o.29.2.c-->
         <div c-id="31.0.0.0" class="sc-nested-scope-cmp sc-nested-scope-cmp-s some-scope-class">
           <!--s.31.1.1.0.-->
-          <slot c-id="29.2.2.0" s-sn=""></slot>
+          <slot c-id="29.2.2.0" class="sc-nested-cmp-parent" s-sn=""></slot>
         </div>
       </nested-scope-cmp>
     </div>
   </template>
   <!--r.29-->
-  <nested-cmp-child custom-hydrate-flag="" s-id="30">
+  <nested-cmp-child class="sc-nested-cmp-child-h" custom-hydrate-flag="" s-id="30">
     <template shadowrootmode="open">
       <style>
         :host{display:block}
       </style>
-      <div c-id="30.0.0.0" class="some-other-class">
-        <slot c-id="30.1.1.0"></slot>
+      <div c-id="30.0.0.0" class="sc-nested-cmp-child some-other-class">
+        <slot c-id="30.1.1.0" class="sc-nested-cmp-child"></slot>
       </div>
     </template>
     <!--r.30-->

test/wdio/complex-properties/__snapshots__/cmp.test.tsx.snap

@@ -1,38 +1,38 @@
 // Snapshot v1
 
 exports[`complex-properties > should render complex properties 1`] = `
-"<complex-properties baz="serialized:eyJ0eXBlIjoibWFwIiwidmFsdWUiOltbeyJ0eXBlIjoic3RyaW5nIiwidmFsdWUiOiJmb28ifSx7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1sicXV4Iix7InR5cGUiOiJzeW1ib2wiLCJ2YWx1ZSI6InF1dXgifV1dfV1dfQ==" class="hydrated" corge="serialized:eyJ0eXBlIjoic2V0IiwidmFsdWUiOlt7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1siZm9vIix7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1siYmFyIix7InR5cGUiOiJzdHJpbmciLCJ2YWx1ZSI6ImZvbyJ9XV19XV19XX0=" foo="serialized:eyJ0eXBlIjoib2JqZWN0IiwidmFsdWUiOltbImJhciIseyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOjEyM31dLFsibG9vIix7InR5cGUiOiJhcnJheSIsInZhbHVlIjpbeyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOjF9LHsidHlwZSI6Im51bWJlciIsInZhbHVlIjoyfSx7InR5cGUiOiJudW1iZXIiLCJ2YWx1ZSI6M31dfV0sWyJxdXgiLHsidHlwZSI6Im9iamVjdCIsInZhbHVlIjpbWyJxdXV4Iix7InR5cGUiOiJzeW1ib2wiLCJ2YWx1ZSI6InF1dXgifV1dfV1dfQ==" grault="serialized:eyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOiJJbmZpbml0eSJ9" kids-names="serialized:eyJ0eXBlIjoiYXJyYXkiLCJ2YWx1ZSI6W3sidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSm9obiJ9LHsidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSmFuZSJ9LHsidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSmltIn1dfQ==" quux="serialized:eyJ0eXBlIjoic2V0IiwidmFsdWUiOlt7InR5cGUiOiJzdHJpbmciLCJ2YWx1ZSI6ImZvbyJ9XX0=" s-id="1" waldo="serialized:eyJ0eXBlIjoibnVsbCJ9">
+"<complex-properties baz="serialized:eyJ0eXBlIjoibWFwIiwidmFsdWUiOltbeyJ0eXBlIjoic3RyaW5nIiwidmFsdWUiOiJmb28ifSx7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1sicXV4Iix7InR5cGUiOiJzeW1ib2wiLCJ2YWx1ZSI6InF1dXgifV1dfV1dfQ==" class="hydrated sc-complex-properties-h" corge="serialized:eyJ0eXBlIjoic2V0IiwidmFsdWUiOlt7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1siZm9vIix7InR5cGUiOiJvYmplY3QiLCJ2YWx1ZSI6W1siYmFyIix7InR5cGUiOiJzdHJpbmciLCJ2YWx1ZSI6ImZvbyJ9XV19XV19XX0=" foo="serialized:eyJ0eXBlIjoib2JqZWN0IiwidmFsdWUiOltbImJhciIseyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOjEyM31dLFsibG9vIix7InR5cGUiOiJhcnJheSIsInZhbHVlIjpbeyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOjF9LHsidHlwZSI6Im51bWJlciIsInZhbHVlIjoyfSx7InR5cGUiOiJudW1iZXIiLCJ2YWx1ZSI6M31dfV0sWyJxdXgiLHsidHlwZSI6Im9iamVjdCIsInZhbHVlIjpbWyJxdXV4Iix7InR5cGUiOiJzeW1ib2wiLCJ2YWx1ZSI6InF1dXgifV1dfV1dfQ==" grault="serialized:eyJ0eXBlIjoibnVtYmVyIiwidmFsdWUiOiJJbmZpbml0eSJ9" kids-names="serialized:eyJ0eXBlIjoiYXJyYXkiLCJ2YWx1ZSI6W3sidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSm9obiJ9LHsidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSmFuZSJ9LHsidHlwZSI6InN0cmluZyIsInZhbHVlIjoiSmltIn1dfQ==" quux="serialized:eyJ0eXBlIjoic2V0IiwidmFsdWUiOlt7InR5cGUiOiJzdHJpbmciLCJ2YWx1ZSI6ImZvbyJ9XX0=" s-id="1" waldo="serialized:eyJ0eXBlIjoibnVsbCJ9">
   <template shadowrootmode="open">
-    <ul c-id="1.0.0.0">
-      <li c-id="1.1.1.0">
+    <ul c-id="1.0.0.0" class="sc-complex-properties">
+      <li c-id="1.1.1.0" class="sc-complex-properties">
         <!--t.1.2.2.0-->
         this.foo.bar: 123
       </li>
-      <li c-id="1.3.1.1">
+      <li c-id="1.3.1.1" class="sc-complex-properties">
         <!--t.1.4.2.0-->
         this.foo.loo: 1, 2, 3
       </li>
-      <li c-id="1.5.1.2">
+      <li c-id="1.5.1.2" class="sc-complex-properties">
         <!--t.1.6.2.0-->
         this.foo.qux: symbol
       </li>
-      <li c-id="1.7.1.3">
+      <li c-id="1.7.1.3" class="sc-complex-properties">
         <!--t.1.8.2.0-->
         this.baz.get('foo'): symbol
       </li>
-      <li c-id="1.9.1.4">
+      <li c-id="1.9.1.4" class="sc-complex-properties">
         <!--t.1.10.2.0-->
         this.quux.has('foo'): true
       </li>
-      <li c-id="1.11.1.5">
+      <li c-id="1.11.1.5" class="sc-complex-properties">
         <!--t.1.12.2.0-->
         this.grault: true
       </li>
-      <li c-id="1.13.1.6">
+      <li c-id="1.13.1.6" class="sc-complex-properties">
         <!--t.1.14.2.0-->
         this.waldo: true
       </li>
-      <li c-id="1.15.1.7">
+      <li c-id="1.15.1.7" class="sc-complex-properties">
         <!--t.1.16.2.0-->
         this.kidsNames: John, Jane, Jim
       </li>