Skip to content

Commit dfbc340

Browse files
christian-bromannchristian-bromann
authoredJul 1, 2024··
fix(hydrate): partially revert #5838 (#5876)
·
v4.28.2v4.19.2
1 parent 42aa488 commit dfbc340

File tree

9 files changed

+271
-17
lines changed

9 files changed

+271
-17
lines changed
 

‎src/runtime/styles.ts

+5-11
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,7 @@ export const registerStyle = (scopeId: string, cssText: string, allowCS: boolean
4747
* @param mode an optional current mode
4848
* @returns the scope ID for the component of interest
4949
*/
50-
export const addStyle = (
51-
styleContainerNode: Element | Document | ShadowRoot,
52-
cmpMeta: d.ComponentRuntimeMeta,
53-
mode?: string,
54-
) => {
55-
const styleContainerDocument = styleContainerNode as Document;
56-
const styleContainerShadowRoot = styleContainerNode as ShadowRoot;
50+
export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMeta, mode?: string) => {
5751
const scopeId = getScopeId(cmpMeta, mode);
5852
const style = styles.get(scopeId);
5953

@@ -66,7 +60,7 @@ export const addStyle = (
6660

6761
if (style) {
6862
if (typeof style === 'string') {
69-
styleContainerNode = styleContainerDocument.head || (styleContainerNode as HTMLElement);
63+
styleContainerNode = styleContainerNode.head || (styleContainerNode as HTMLElement);
7064
let appliedStyles = rootAppliedStyles.get(styleContainerNode);
7165
let styleElm;
7266
if (!appliedStyles) {
@@ -75,7 +69,7 @@ export const addStyle = (
7569
if (!appliedStyles.has(scopeId)) {
7670
if (
7771
BUILD.hydrateClientSide &&
78-
styleContainerShadowRoot.host &&
72+
styleContainerNode.host &&
7973
(styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))
8074
) {
8175
// This is only happening on native shadow-dom, do not needs CSS var shim
@@ -106,8 +100,8 @@ export const addStyle = (
106100
appliedStyles.add(scopeId);
107101
}
108102
}
109-
} else if (BUILD.constructableCSS && !styleContainerDocument.adoptedStyleSheets.includes(style)) {
110-
styleContainerDocument.adoptedStyleSheets = [...styleContainerDocument.adoptedStyleSheets, style];
103+
} else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
104+
styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
111105
}
112106
}
113107
return scopeId;

‎test/end-to-end/src/components.d.ts

+60
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,16 @@ export namespace Components {
108108
*/
109109
"mode"?: any;
110110
}
111+
interface ScopedCarDetail {
112+
"car": CarData;
113+
}
114+
/**
115+
* Component that helps display a list of cars
116+
*/
117+
interface ScopedCarList {
118+
"cars": CarData[];
119+
"selected": CarData;
120+
}
111121
interface SlotCmp {
112122
}
113123
interface SlotCmpContainer {
@@ -130,6 +140,10 @@ export interface EventCmpCustomEvent<T> extends CustomEvent<T> {
130140
detail: T;
131141
target: HTMLEventCmpElement;
132142
}
143+
export interface ScopedCarListCustomEvent<T> extends CustomEvent<T> {
144+
detail: T;
145+
target: HTMLScopedCarListElement;
146+
}
133147
declare global {
134148
interface HTMLAnotherCarDetailElement extends Components.AnotherCarDetail, HTMLStencilElement {
135149
}
@@ -322,6 +336,32 @@ declare global {
322336
prototype: HTMLPropCmpElement;
323337
new (): HTMLPropCmpElement;
324338
};
339+
interface HTMLScopedCarDetailElement extends Components.ScopedCarDetail, HTMLStencilElement {
340+
}
341+
var HTMLScopedCarDetailElement: {
342+
prototype: HTMLScopedCarDetailElement;
343+
new (): HTMLScopedCarDetailElement;
344+
};
345+
interface HTMLScopedCarListElementEventMap {
346+
"carSelected": CarData;
347+
}
348+
/**
349+
* Component that helps display a list of cars
350+
*/
351+
interface HTMLScopedCarListElement extends Components.ScopedCarList, HTMLStencilElement {
352+
addEventListener<K extends keyof HTMLScopedCarListElementEventMap>(type: K, listener: (this: HTMLScopedCarListElement, ev: ScopedCarListCustomEvent<HTMLScopedCarListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
353+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
354+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
355+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
356+
removeEventListener<K extends keyof HTMLScopedCarListElementEventMap>(type: K, listener: (this: HTMLScopedCarListElement, ev: ScopedCarListCustomEvent<HTMLScopedCarListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
357+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
358+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
359+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
360+
}
361+
var HTMLScopedCarListElement: {
362+
prototype: HTMLScopedCarListElement;
363+
new (): HTMLScopedCarListElement;
364+
};
325365
interface HTMLSlotCmpElement extends Components.SlotCmp, HTMLStencilElement {
326366
}
327367
var HTMLSlotCmpElement: {
@@ -372,6 +412,8 @@ declare global {
372412
"path-alias-cmp": HTMLPathAliasCmpElement;
373413
"prerender-cmp": HTMLPrerenderCmpElement;
374414
"prop-cmp": HTMLPropCmpElement;
415+
"scoped-car-detail": HTMLScopedCarDetailElement;
416+
"scoped-car-list": HTMLScopedCarListElement;
375417
"slot-cmp": HTMLSlotCmpElement;
376418
"slot-cmp-container": HTMLSlotCmpContainerElement;
377419
"slot-parent-cmp": HTMLSlotParentCmpElement;
@@ -455,6 +497,17 @@ declare namespace LocalJSX {
455497
*/
456498
"mode"?: any;
457499
}
500+
interface ScopedCarDetail {
501+
"car"?: CarData;
502+
}
503+
/**
504+
* Component that helps display a list of cars
505+
*/
506+
interface ScopedCarList {
507+
"cars"?: CarData[];
508+
"onCarSelected"?: (event: ScopedCarListCustomEvent<CarData>) => void;
509+
"selected"?: CarData;
510+
}
458511
interface SlotCmp {
459512
}
460513
interface SlotCmpContainer {
@@ -490,6 +543,8 @@ declare namespace LocalJSX {
490543
"path-alias-cmp": PathAliasCmp;
491544
"prerender-cmp": PrerenderCmp;
492545
"prop-cmp": PropCmp;
546+
"scoped-car-detail": ScopedCarDetail;
547+
"scoped-car-list": ScopedCarList;
493548
"slot-cmp": SlotCmp;
494549
"slot-cmp-container": SlotCmpContainer;
495550
"slot-parent-cmp": SlotParentCmp;
@@ -531,6 +586,11 @@ declare module "@stencil/core" {
531586
"path-alias-cmp": LocalJSX.PathAliasCmp & JSXBase.HTMLAttributes<HTMLPathAliasCmpElement>;
532587
"prerender-cmp": LocalJSX.PrerenderCmp & JSXBase.HTMLAttributes<HTMLPrerenderCmpElement>;
533588
"prop-cmp": LocalJSX.PropCmp & JSXBase.HTMLAttributes<HTMLPropCmpElement>;
589+
"scoped-car-detail": LocalJSX.ScopedCarDetail & JSXBase.HTMLAttributes<HTMLScopedCarDetailElement>;
590+
/**
591+
* Component that helps display a list of cars
592+
*/
593+
"scoped-car-list": LocalJSX.ScopedCarList & JSXBase.HTMLAttributes<HTMLScopedCarListElement>;
534594
"slot-cmp": LocalJSX.SlotCmp & JSXBase.HTMLAttributes<HTMLSlotCmpElement>;
535595
"slot-cmp-container": LocalJSX.SlotCmpContainer & JSXBase.HTMLAttributes<HTMLSlotCmpContainerElement>;
536596
"slot-parent-cmp": LocalJSX.SlotParentCmp & JSXBase.HTMLAttributes<HTMLSlotParentCmpElement>;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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}]\\" class=\\"sc-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-car-list\\">/*!@:host*/.sc-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-car-list\\" c-id=\\"1.1.1.0\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\" s-id=\\"2\\"><!--r.2--><section c-id=\\"2.0.0.0\\"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail></li><li class=\\"sc-car-list\\" c-id=\\"1.3.1.1\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\" s-id=\\"3\\"><!--r.3--><section c-id=\\"3.0.0.0\\"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail></li></ul></template><!--r.1--></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=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-car-list\\">/*!@:host*/.sc-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-car-list\\" c-id=\\"1.1.1.0\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\" s-id=\\"2\\"><!--r.2--><section class=\\"sc-car-list\\" c-id=\\"2.0.0.0\\"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail></li><li class=\\"sc-car-list\\" c-id=\\"1.3.1.1\\"><car-detail class=\\"sc-car-list\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\" s-id=\\"3\\"><!--r.3--><section class=\\"sc-car-list\\" c-id=\\"3.0.0.0\\"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail></li></ul></template><!--r.1--></car-list>"`;
44

55
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}]\\" class=\\"sc-another-car-list-h\\" custom-hydrate-flag=\\"\\" s-id=\\"1\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-list\\">/*!@:host*/.sc-another-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}/*!@ul*/ul.sc-another-car-list{display:block;margin:0;padding:0}/*!@li*/li.sc-another-car-list{list-style:none;margin:0;padding:20px}/*!@.selected*/.selected.sc-another-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><ul class=\\"sc-another-car-list\\" c-id=\\"1.0.0.0\\"><li class=\\"sc-another-car-list\\" c-id=\\"1.1.1.0\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.2.2.0\\" s-id=\\"2\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\" c-id=\\"2.0.0.0\\"><!--t.2.1.1.0-->2024 VW Vento</section></template><!--r.2--></another-car-detail></li><li class=\\"sc-another-car-list\\" c-id=\\"1.3.1.1\\"><another-car-detail class=\\"sc-another-car-list sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" c-id=\\"1.4.2.0\\" s-id=\\"3\\"><template shadowrootmode=\\"open\\"><style sty-id=\\"sc-another-car-detail\\">/*!@section*/section.sc-another-car-detail{color:green}</style><section class=\\"sc-another-car-detail\\" c-id=\\"3.0.0.0\\"><!--t.3.1.1.0-->2023 VW Beetle</section></template><!--r.3--></another-car-detail></li></ul></template><!--r.1--></another-car-list>"`;
66

‎test/end-to-end/src/declarative-shadow-dom/readme.md

+46
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,52 @@
55
<!-- Auto Generated Below -->
66

77

8+
## Overview
9+
10+
Component that helps display a list of cars
11+
12+
## Properties
13+
14+
| Property | Attribute | Description | Type | Default |
15+
| ---------- | --------- | ----------- | ----------- | ----------- |
16+
| `cars` | -- | | `CarData[]` | `undefined` |
17+
| `selected` | -- | | `CarData` | `undefined` |
18+
19+
20+
## Events
21+
22+
| Event | Description | Type |
23+
| ------------- | ----------- | ---------------------- |
24+
| `carSelected` | | `CustomEvent<CarData>` |
25+
26+
27+
## Slots
28+
29+
| Slot | Description |
30+
| ---------- | -------------------------------- |
31+
| `"header"` | The slot for the header content. |
32+
33+
34+
## Shadow Parts
35+
36+
| Part | Description |
37+
| ------- | ------------------------------------------- |
38+
| `"car"` | The shadow part to target to style the car. |
39+
40+
41+
## Dependencies
42+
43+
### Depends on
44+
45+
- [another-car-detail](.)
46+
47+
### Graph
48+
```mermaid
49+
graph TD;
50+
scoped-car-list --> another-car-detail
51+
style scoped-car-list fill:#f9f,stroke:#333,stroke-width:4px
52+
```
53+
854
----------------------------------------------
955

1056
*Built with [StencilJS](https://stenciljs.com/)*

‎test/end-to-end/src/declarative-shadow-dom/scoped-car-detail.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, h, Prop } from '@stencil/core';
2+
3+
import { CarData } from '../car-list/car-data';
4+
5+
@Component({
6+
tag: 'scoped-car-detail',
7+
styleUrl: 'another-car-detail.css',
8+
scoped: true,
9+
})
10+
export class CarDetail {
11+
@Prop() car: CarData;
12+
13+
render() {
14+
if (!this.car) {
15+
return null;
16+
}
17+
18+
return (
19+
<section>
20+
{this.car.year} {this.car.make} {this.car.model}
21+
</section>
22+
);
23+
}
24+
}

‎test/end-to-end/src/declarative-shadow-dom/scoped-car-list.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
2+
3+
import { CarData } from '../car-list/car-data';
4+
5+
/**
6+
* Component that helps display a list of cars
7+
* @slot header - The slot for the header content.
8+
* @part car - The shadow part to target to style the car.
9+
*/
10+
@Component({
11+
tag: 'scoped-car-list',
12+
styleUrl: 'another-car-list.css',
13+
scoped: true,
14+
})
15+
export class CarList {
16+
@Prop() cars: CarData[];
17+
@Prop({ mutable: true }) selected: CarData;
18+
@Event() carSelected: EventEmitter<CarData>;
19+
20+
componentWillLoad() {
21+
return new Promise((resolve) => setTimeout(resolve, 20));
22+
}
23+
24+
selectCar(car: CarData) {
25+
this.selected = car;
26+
this.carSelected.emit(car);
27+
}
28+
29+
render() {
30+
if (!Array.isArray(this.cars)) {
31+
return null;
32+
}
33+
34+
return (
35+
<ul>
36+
{this.cars.map((car) => {
37+
return (
38+
<li class={car === this.selected ? 'selected' : ''}>
39+
<another-car-detail car={car}></another-car-detail>
40+
</li>
41+
);
42+
})}
43+
</ul>
44+
);
45+
}
46+
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -141,18 +141,18 @@ describe('renderToString', () => {
141141
});
142142
expect(html).toMatchSnapshot();
143143
expect(html).toContain(
144-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
144+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section class="sc-car-list" c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
145145
);
146146
expect(html).toContain(
147-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
147+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section class="sc-car-list" c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
148148
);
149149
});
150150

151151
it('can render a scoped component within a shadow component (sync)', async () => {
152152
const input = `<car-list cars=${JSON.stringify([vento, beetle])}></car-list>`;
153153
const expectedResults = [
154-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
155-
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
154+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.2.2.0" s-id="2"><!--r.2--><section class="sc-car-list" c-id="2.0.0.0"><!--t.2.1.1.0-->2024 VW Vento</section></car-detail>',
155+
'<car-detail class="sc-car-list" custom-hydrate-flag="" c-id="1.4.2.0" s-id="3"><!--r.3--><section class="sc-car-list" c-id="3.0.0.0"><!--t.3.1.1.0-->2023 VW Beetle</section></car-detail>',
156156
] as const;
157157
const opts = {
158158
serializeShadowRoot: true,

‎test/end-to-end/src/miscellaneous/renderToString.e2e.ts

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { CarData } from '../car-list/car-data';
2+
3+
const vento = new CarData('VW', 'Vento', 2024);
4+
const beetle = new CarData('VW', 'Beetle', 2023);
5+
6+
// @ts-ignore may not be existing when project hasn't been built
7+
type HydrateModule = typeof import('../../hydrate');
8+
let renderToString: HydrateModule['renderToString'];
9+
10+
describe('renderToString', () => {
11+
beforeAll(async () => {
12+
// @ts-ignore may not be existing when project hasn't been built
13+
const mod = await import('../../hydrate');
14+
renderToString = mod.renderToString;
15+
});
16+
17+
it('allows to hydrate whole HTML page', async () => {
18+
const { html } = await renderToString(
19+
`<html>
20+
<head>
21+
<link rel="stylesheet" href="whatever.css" >
22+
</head>
23+
24+
<body>
25+
<div class="__next">
26+
<main>
27+
<car-list cars=${JSON.stringify([vento, beetle])}></car-list>
28+
</main>
29+
</div>
30+
31+
<script type="module">
32+
import { defineCustomElements } from "./static/loader/index.js";
33+
defineCustomElements().catch(console.error);
34+
</script>
35+
</body>
36+
</html>`,
37+
{ fullDocument: true, serializeShadowRoot: false },
38+
);
39+
/**
40+
* starts with a DocType and HTML tag
41+
*/
42+
expect(html.startsWith('<!doctype html><html ')).toBeTruthy();
43+
/**
44+
* renders hydration styles and custom link tag within the head tag
45+
*/
46+
expect(html).toContain(
47+
'selected.sc-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><link rel="stylesheet" href="whatever.css"> </head> <body>',
48+
);
49+
});
50+
51+
it('allows to hydrate whole HTML page with using a scoped component', async () => {
52+
const { html } = await renderToString(
53+
`<html>
54+
<head>
55+
<link rel="stylesheet" href="whatever.css" >
56+
</head>
57+
58+
<body>
59+
<div class="__next">
60+
<main>
61+
<scoped-car-list cars=${JSON.stringify([vento, beetle])}></scoped-car-list>
62+
</main>
63+
</div>
64+
65+
<script type="module">
66+
import { defineCustomElements } from "./static/loader/index.js";
67+
defineCustomElements().catch(console.error);
68+
</script>
69+
</body>
70+
</html>`,
71+
{ fullDocument: true, serializeShadowRoot: false },
72+
);
73+
/**
74+
* starts with a DocType and HTML tag
75+
*/
76+
expect(html.startsWith('<!doctype html><html ')).toBeTruthy();
77+
/**
78+
* renders hydration styles and custom link tag within the head tag
79+
*/
80+
expect(html).toContain(
81+
'.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><style sty-id="sc-another-car-detail">/*!@section*/section.sc-another-car-detail{color:green}</style><link rel="stylesheet" href="whatever.css"> </head> <body> <div class="__next"> <main> <scoped-car-list',
82+
);
83+
});
84+
});

‎test/end-to-end/src/miscellaneous/test.e2e.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('sorts hydrated component styles', () => {
3939
.map((c) => c.slice(0, c.indexOf('{')))
4040
.find((c) => c.includes('app-root'));
4141
expect(classSelector).toBe(
42-
'another-car-detail,another-car-list,app-root,build-data,car-detail,car-list,cmp-a,cmp-b,cmp-c,cmp-dsd,cmp-server-vs-client,dom-api,dom-interaction,dom-visible,element-cmp,empty-cmp,empty-cmp-shadow,env-data,event-cmp,import-assets,listen-cmp,method-cmp,path-alias-cmp,prerender-cmp,prop-cmp,slot-cmp,slot-cmp-container,slot-parent-cmp,state-cmp',
42+
'another-car-detail,another-car-list,app-root,build-data,car-detail,car-list,cmp-a,cmp-b,cmp-c,cmp-dsd,cmp-server-vs-client,dom-api,dom-interaction,dom-visible,element-cmp,empty-cmp,empty-cmp-shadow,env-data,event-cmp,import-assets,listen-cmp,method-cmp,path-alias-cmp,prerender-cmp,prop-cmp,scoped-car-detail,scoped-car-list,slot-cmp,slot-cmp-container,slot-parent-cmp,state-cmp',
4343
);
4444
});
4545
});

0 commit comments

Comments
 (0)
Please sign in to comment.