Skip to content

Commit 5982264

Browse files
christian-bromannchristian-bromann
authored
fix(runtime): properly set scope classes (#6224)
* fix(runtime): properly set scope classes * prettier * update tests * prettier
1 parent a38a37b commit 5982264

File tree

6 files changed

+52
-53
lines changed

6 files changed

+52
-53
lines changed

‎src/runtime/styles.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -186,12 +186,7 @@ export const attachStyles = (hostRef: d.HostRef) => {
186186
hostRef.$modeName$,
187187
);
188188

189-
if (
190-
(BUILD.shadowDom || BUILD.scoped) &&
191-
BUILD.cssAnnotations &&
192-
((flags & CMP_FLAGS.needsScopedEncapsulation && flags & CMP_FLAGS.scopedCssEncapsulation) ||
193-
flags & CMP_FLAGS.shadowNeedsScopedCss)
194-
) {
189+
if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & CMP_FLAGS.needsScopedEncapsulation) {
195190
// only required when we're NOT using native shadow dom (slot)
196191
// or this browser doesn't support native shadow dom
197192
// and this host element was NOT created with SSR

‎src/runtime/test/shadow.spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,16 @@ describe('shadow', () => {
8484
});
8585

8686
const expected = `
87-
<cmp-a class="hydrated">
87+
<cmp-a class="hydrated sc-cmp-a-h">
8888
<!---->
89-
<div>
89+
<div class=\"sc-cmp-a sc-cmp-a-s\">
9090
<span slot=\"start\">
9191
Start
9292
</span>
93-
<span>
93+
<span class=\"sc-cmp-a sc-cmp-a-s\">
9494
Text
9595
</span>
96-
<div class="end">
96+
<div class="end sc-cmp-a sc-cmp-a-s">
9797
<span slot=\"end\">
9898
End
9999
</span>

‎test/end-to-end/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"scripts": {
99
"build": "node ../../bin/stencil build --config ./stencil.build.config.ts --docs",
1010
"start": "node ../../bin/stencil build --debug --watch --dev --serve",
11-
"test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug",
11+
"test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug -u",
1212
"test.dist": "npm run build && node test-end-to-end-dist.js && node test-end-to-end-hydrate.js && npm run test.exportMap",
1313
"test.e2e": "node ../../bin/stencil test --e2e",
1414
"test.exportMap": "node ./exportMap/index.js && tsx ./exportMap/index.mts",

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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>"`;
3+
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>"`;
44

55
exports[`renderToString can render a simple shadow component 1`] = `
6-
"<another-car-detail custom-hydrate-flag=\\"\\" s-id=\\"1\\">
6+
"<another-car-detail class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\">
77
<template shadowrootmode=\\"open\\">
88
<style>
99
section{color:green}
@@ -14,33 +14,33 @@ exports[`renderToString can render a simple shadow component 1`] = `
1414
`;
1515
1616
exports[`renderToString can render nested components 1`] = `
17-
"<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\\">
17+
"<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\\">
1818
<template shadowrootmode=\\"open\\">
1919
<style>
2020
: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)}
2121
</style>
22-
<ul c-id=\\"6.0.0.0\\">
23-
<li c-id=\\"6.1.1.0\\">
24-
<another-car-detail c-id=\\"6.2.2.0\\" custom-hydrate-flag=\\"\\" s-id=\\"7\\">
22+
<ul c-id=\\"6.0.0.0\\" class=\\"sc-another-car-list\\">
23+
<li c-id=\\"6.1.1.0\\" class=\\"sc-another-car-list\\">
24+
<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\\">
2525
<template shadowrootmode=\\"open\\">
2626
<style>
2727
section{color:green}
2828
</style>
29-
<section c-id=\\"7.0.0.0\\">
29+
<section c-id=\\"7.0.0.0\\" class=\\"sc-another-car-detail\\">
3030
<!--t.7.1.1.0-->
3131
2024 VW Vento
3232
</section>
3333
</template>
3434
<!--r.7-->
3535
</another-car-detail>
3636
</li>
37-
<li c-id=\\"6.3.1.1\\">
38-
<another-car-detail c-id=\\"6.4.2.0\\" custom-hydrate-flag=\\"\\" s-id=\\"8\\">
37+
<li c-id=\\"6.3.1.1\\" class=\\"sc-another-car-list\\">
38+
<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\\">
3939
<template shadowrootmode=\\"open\\">
4040
<style>
4141
section{color:green}
4242
</style>
43-
<section c-id=\\"8.0.0.0\\">
43+
<section c-id=\\"8.0.0.0\\" class=\\"sc-another-car-detail\\">
4444
<!--t.8.1.1.0-->
4545
2023 VW Beetle
4646
</section>
@@ -55,12 +55,12 @@ exports[`renderToString can render nested components 1`] = `
5555
`;
5656
5757
exports[`renderToString supports passing props to components 1`] = `
58-
"<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\\">
58+
"<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\\">
5959
<template shadowrootmode=\\"open\\">
6060
<style>
6161
section{color:green}
6262
</style>
63-
<section c-id=\\"2.0.0.0\\">
63+
<section c-id=\\"2.0.0.0\\" class=\\"sc-another-car-detail\\">
6464
<!--t.2.1.1.0-->
6565
2024 VW Vento
6666
</section>
@@ -70,12 +70,12 @@ exports[`renderToString supports passing props to components 1`] = `
7070
`;
7171
7272
exports[`renderToString supports passing props to components with a simple object 1`] = `
73-
"<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\\">
73+
"<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\\">
7474
<template shadowrootmode=\\"open\\">
7575
<style>
7676
section{color:green}
7777
</style>
78-
<section c-id=\\"3.0.0.0\\">
78+
<section c-id=\\"3.0.0.0\\" class=\\"sc-another-car-detail\\">
7979
<!--t.3.1.1.0-->
8080
2024 VW Vento
8181
</section>

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('renderToString', () => {
105105
fullDocument: false,
106106
},
107107
);
108-
expect(html).toContain('<section c-id="4.0.0.0"><!--t.4.1.1.0--> </section>');
108+
expect(html).toContain('<section class="sc-another-car-detail" c-id="4.0.0.0"><!--t.4.1.1.0--> </section>');
109109
});
110110

111111
it('supports styles for DSD', async () => {
@@ -145,10 +145,10 @@ describe('renderToString', () => {
145145
});
146146
expect(html).toMatchSnapshot();
147147
expect(html).toContain(
148-
`<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>`,
148+
`<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>`,
149149
);
150150
expect(html).toContain(
151-
`<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>`,
151+
`<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>`,
152152
);
153153
});
154154

@@ -161,18 +161,18 @@ describe('renderToString', () => {
161161

162162
const resultRenderToString = await readableToString(renderToString(input, opts, true));
163163
expect(resultRenderToString).toContain(
164-
'<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>',
164+
'<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>',
165165
);
166166
expect(resultRenderToString).toContain(
167-
'<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>',
167+
'<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>',
168168
);
169169

170170
const resultStreamToString = await readableToString(streamToString(input, opts));
171171
expect(resultStreamToString).toContain(
172-
'<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>',
172+
'<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>',
173173
);
174174
expect(resultStreamToString).toContain(
175-
'<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>',
175+
'<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>',
176176
);
177177
});
178178

@@ -242,7 +242,7 @@ describe('renderToString', () => {
242242
* ```
243243
*/
244244
expect(html).toContain(
245-
`<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>`,
245+
`<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>`,
246246
);
247247

248248
/**
@@ -257,7 +257,7 @@ describe('renderToString', () => {
257257
* </car-detail>
258258
*/
259259
expect(html).toContain(
260-
`<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>`,
260+
`<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>`,
261261
);
262262

263263
const page = await newE2EPage({ html, url: 'https://stencil.com' });
@@ -284,15 +284,19 @@ describe('renderToString', () => {
284284
serializeShadowRoot: false,
285285
fullDocument: false,
286286
});
287-
expect(html).toBe('<another-car-detail custom-hydrate-flag="" s-id="25"><!--r.25--></another-car-detail>');
287+
expect(html).toBe(
288+
'<another-car-detail class="sc-another-car-detail-h" custom-hydrate-flag="" s-id="25"><!--r.25--></another-car-detail>',
289+
);
288290
});
289291

290292
it('does not render a shadow component but its light dom', async () => {
291293
const { html } = await renderToString('<cmp-with-slot>Hello World</cmp-with-slot>', {
292294
serializeShadowRoot: false,
293295
fullDocument: false,
294296
});
295-
expect(html).toBe('<cmp-with-slot custom-hydrate-flag="" s-id="26"><!--r.26-->Hello World</cmp-with-slot>');
297+
expect(html).toBe(
298+
'<cmp-with-slot class="sc-cmp-with-slot-h" custom-hydrate-flag="" s-id="26"><!--r.26-->Hello World</cmp-with-slot>',
299+
);
296300
});
297301

298302
describe('modes in declarative shadow dom', () => {
@@ -344,30 +348,30 @@ describe('renderToString', () => {
344348
prettyHtml: true,
345349
},
346350
);
347-
expect(html).toBe(`<nested-cmp-parent custom-hydrate-flag="" s-id="29">
351+
expect(html).toBe(`<nested-cmp-parent class="sc-nested-cmp-parent-h" custom-hydrate-flag="" s-id="29">
348352
<template shadowrootmode="open">
349353
<style>
350354
.sc-nested-scope-cmp-h{color:green}:host{display:inline-block}
351355
</style>
352-
<div c-id="29.0.0.0" class="some-class">
353-
<nested-scope-cmp c-id="29.1.1.0" class="sc-nested-scope-cmp-h" custom-hydrate-flag="" s-id="31">
356+
<div c-id="29.0.0.0" class="sc-nested-cmp-parent some-class">
357+
<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">
354358
<!--r.31-->
355359
<!--o.29.2.c-->
356360
<div c-id="31.0.0.0" class="sc-nested-scope-cmp sc-nested-scope-cmp-s some-scope-class">
357361
<!--s.31.1.1.0.-->
358-
<slot c-id="29.2.2.0" s-sn=""></slot>
362+
<slot c-id="29.2.2.0" class="sc-nested-cmp-parent" s-sn=""></slot>
359363
</div>
360364
</nested-scope-cmp>
361365
</div>
362366
</template>
363367
<!--r.29-->
364-
<nested-cmp-child custom-hydrate-flag="" s-id="30">
368+
<nested-cmp-child class="sc-nested-cmp-child-h" custom-hydrate-flag="" s-id="30">
365369
<template shadowrootmode="open">
366370
<style>
367371
:host{display:block}
368372
</style>
369-
<div c-id="30.0.0.0" class="some-other-class">
370-
<slot c-id="30.1.1.0"></slot>
373+
<div c-id="30.0.0.0" class="sc-nested-cmp-child some-other-class">
374+
<slot c-id="30.1.1.0" class="sc-nested-cmp-child"></slot>
371375
</div>
372376
</template>
373377
<!--r.30-->

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
// Snapshot v1
22

33
exports[`complex-properties > should render complex properties 1`] = `
4-
"<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">
4+
"<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">
55
<template shadowrootmode="open">
6-
<ul c-id="1.0.0.0">
7-
<li c-id="1.1.1.0">
6+
<ul c-id="1.0.0.0" class="sc-complex-properties">
7+
<li c-id="1.1.1.0" class="sc-complex-properties">
88
<!--t.1.2.2.0-->
99
this.foo.bar: 123
1010
</li>
11-
<li c-id="1.3.1.1">
11+
<li c-id="1.3.1.1" class="sc-complex-properties">
1212
<!--t.1.4.2.0-->
1313
this.foo.loo: 1, 2, 3
1414
</li>
15-
<li c-id="1.5.1.2">
15+
<li c-id="1.5.1.2" class="sc-complex-properties">
1616
<!--t.1.6.2.0-->
1717
this.foo.qux: symbol
1818
</li>
19-
<li c-id="1.7.1.3">
19+
<li c-id="1.7.1.3" class="sc-complex-properties">
2020
<!--t.1.8.2.0-->
2121
this.baz.get('foo'): symbol
2222
</li>
23-
<li c-id="1.9.1.4">
23+
<li c-id="1.9.1.4" class="sc-complex-properties">
2424
<!--t.1.10.2.0-->
2525
this.quux.has('foo'): true
2626
</li>
27-
<li c-id="1.11.1.5">
27+
<li c-id="1.11.1.5" class="sc-complex-properties">
2828
<!--t.1.12.2.0-->
2929
this.grault: true
3030
</li>
31-
<li c-id="1.13.1.6">
31+
<li c-id="1.13.1.6" class="sc-complex-properties">
3232
<!--t.1.14.2.0-->
3333
this.waldo: true
3434
</li>
35-
<li c-id="1.15.1.7">
35+
<li c-id="1.15.1.7" class="sc-complex-properties">
3636
<!--t.1.16.2.0-->
3737
this.kidsNames: John, Jane, Jim
3838
</li>

0 commit comments

Comments
 (0)