Skip to content

Commit 783c646

Browse files
committed
Fix Demo3 heading and add Construced Stylesheet reference
1 parent 7613321 commit 783c646

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ If `styles.css` was slow to arrive over the network, or was large enough to take
105105

106106
(There is no general CSS modules browser support as of this writing; that part of the demo was created and tested a custom Chromium build).
107107

108-
An alternative non-module approach for packaging CSS/JSON in a custom element is to inline the content as a JavaScript string rather than `fetch()`ing it dynamically.
108+
An alternative non-module approach for packaging CSS/JSON in a custom element is to inline the content as a JavaScript string rather than `fetch()`ing it dynamically. This string can be fed into a [Constructed Stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) or a `<style>` element.
109109
This eliminates any concerns about a a delay in the `fetch()` as outlined above. However, in addition to the clunky developer ergonimics
110110
of a bunch of inlined JavaScript string content in one's custom element JS logic, this approach has a quantifiable memory cost. This is due to the fact that the original JS string lives on alongside the CSSStyleSheet or JSON object that it is eventually parsed into. Whereas with CSS/JSON modules, nothing persists but the CSSStylesheet or JSON object.
111111

demo3/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h2>Demo 1: Fetching of JSON and CSS modules starts before script execution</h2>
1+
<h2>Demo 3: Increased memory cost as CSS inlined as a JavaScript string</h2>
22
<br>
33
<ul>
44
<li><a href="./noModule.html">Styles inlined in module with Constructed StyleSheet (supported in Chromium-based browsers)</a></li>

0 commit comments

Comments
 (0)