Skip to content

Commit a67b3d6

Browse files
dandclarkdandclark
committed
Initial commit
0 parents  commit a67b3d6

16 files changed

+276
-0
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# JSON/CSS Module notes
2+
Intro
3+
4+
## Demo 1: Fetching of JSON and CSS modules won't be blocked by long-running scripts elsewhere in the module graph
5+
Text
6+
7+
## Demo 2: Constructable stylesheets and/or CSS modules vs <link> elements in shadow roots
8+
Text

‎demo1/busyWork.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Eat some cycles
2+
for (let i = 0; i < 1000000; i++) {
3+
document.createElement("div");
4+
}

‎demo1/cat.jpg

45 KB
Loading

‎demo1/displayText.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"displayText": "This is text from a JSON config"}

‎demo1/fetcherElement.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
let configPromise = fetch("./displayText.json")
2+
.then((dataResponse) => {
3+
return dataResponse.text();
4+
});
5+
6+
class FetchTestElement extends HTMLElement {
7+
constructor() {
8+
super();
9+
this.shadow = this.attachShadow({mode: "closed"});
10+
11+
let sheet = new CSSStyleSheet();
12+
sheet.replaceSync(`
13+
.outer-container {
14+
display:inline-block;
15+
margin: 0.2em;
16+
border: 2px solid red;
17+
}
18+
19+
.text-container {
20+
padding-right: 0.3em;
21+
font-size: 2em;
22+
font-style: italic;
23+
font-family: 'Impact';
24+
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
25+
background-clip: text;
26+
-webkit-background-clip: text;
27+
text-fill-color: transparent;
28+
-webkit-text-fill-color: transparent;
29+
}
30+
`);
31+
32+
this.shadow.adoptedStyleSheets = [sheet];
33+
34+
this.shadow.innerHTML = `
35+
<div class="outer-container">
36+
<div class="text-container"></div>
37+
</div>
38+
`;
39+
40+
configPromise.then((dataText) => {
41+
let displayTextConfig = JSON.parse(dataText);
42+
document.querySelector(".text-container").innerText = displayTextConfig.displayText;
43+
});
44+
}
45+
}
46+
47+
export {FetchTestElement};

‎demo1/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h2>demo1</h2>

‎demo1/jsonModuleElement.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import displayTextConfig from "./displayText.json";
2+
3+
class JSONModuleTestElement extends HTMLElement {
4+
constructor() {
5+
super();
6+
this.shadow = this.attachShadow({mode: "closed"});
7+
8+
let sheet = new CSSStyleSheet();
9+
sheet.replaceSync(`
10+
.outer-container {
11+
display:inline-block;
12+
margin: 0.2em;
13+
border: 2px solid red;
14+
}
15+
16+
.text-container {
17+
padding-right: 0.3em;
18+
font-size: 2em;
19+
font-style: italic;
20+
font-family: 'Impact';
21+
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
22+
background-clip: text;
23+
-webkit-background-clip: text;
24+
text-fill-color: transparent;
25+
-webkit-text-fill-color: transparent;
26+
}
27+
`);
28+
29+
this.shadow.adoptedStyleSheets = [sheet];
30+
31+
let displayText = displayTextConfig.displayText;
32+
33+
this.shadow.innerHTML = `
34+
<div class="outer-container">
35+
<div class="text-container">${displayText}</div>
36+
</div>
37+
`;
38+
}
39+
}
40+
41+
export {JSONModuleTestElement};

‎demo1/linkTest.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.outer-container {
2+
display:inline-block;
3+
margin: 0.2em;
4+
border: 2px solid red;
5+
}
6+
7+
.text-container {
8+
padding-right: 0.3em;
9+
font-size: 2em;
10+
font-style: italic;
11+
font-family: 'Impact';
12+
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
13+
background-clip: text;
14+
-webkit-background-clip: text;
15+
text-fill-color: transparent;
16+
-webkit-text-fill-color: transparent;
17+
}
18+
19+
.cat-container {
20+
height: 250px;
21+
width: 340px;
22+
background-size: cover;
23+
background-image: url("cat.jpg");
24+
}

‎demo1/module.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>parallelFetch module</title>
5+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
6+
<script type="module">
7+
import "./busyWork.js";
8+
import {JSONModuleTestElement} from "./jsonModuleElement.js";
9+
window.customElements.define("json-module-test-element", JSONModuleTestElement);
10+
</script>
11+
<script>
12+
function loadHandler() {
13+
setTimeout(() => {
14+
let element = document.createElement("json-module-test-element");
15+
document.body.appendChild(element);
16+
}, 25);
17+
}
18+
</script>
19+
</head>
20+
<body onload="loadHandler()">
21+
<json-module-test-element></json-module-test-element>
22+
<json-module-test-element></json-module-test-element>
23+
</body>
24+
</html>

‎demo1/noModule.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>parallelFetch noModule</title>
5+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
6+
<script type="module">
7+
import "./busyWork.js";
8+
import {FetchTestElement} from "./fetcherElement.js";
9+
window.customElements.define("fetch-test-element", FetchTestElement);
10+
</script>
11+
<script>
12+
function loadHandler() {
13+
setTimeout(() => {
14+
let element = document.createElement("fetch-test-element");
15+
document.body.appendChild(element);
16+
}, 25);
17+
}
18+
</script>
19+
</head>
20+
<body onload="loadHandler()">
21+
<fetch-test-element></fetch-test-element>
22+
<fetch-test-element></fetch-test-element>
23+
</body>
24+
</html>

‎demo2/cat.jpg

45 KB
Loading

‎demo2/cssModuleElement.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import sheet from "./linkTest.css";
2+
3+
class CSSModuleTestElement extends HTMLElement {
4+
constructor() {
5+
super();
6+
this.shadow = this.attachShadow({mode: "closed"});
7+
this.shadow.adoptedStyleSheets = [sheet];
8+
9+
this.shadow.innerHTML = `
10+
<div class="outer-container">
11+
<div class="text-container">This text should be styled</div>
12+
<div class="cat-container"></div>
13+
</div>
14+
`;
15+
}
16+
}
17+
export {CSSModuleTestElement};

‎demo2/linkInShadowElement.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class LinkTestElement extends HTMLElement {
2+
constructor() {
3+
super();
4+
this.shadow = this.attachShadow({mode: "closed"});
5+
6+
this.shadow.innerHTML = `
7+
<link rel="stylesheet" href="linkTest.css" />
8+
<div class="outer-container">
9+
<div class="text-container">This text should be styled</div>
10+
<div class="cat-container"></div>
11+
</div>
12+
`;
13+
}
14+
}
15+
export {LinkTestElement};

‎demo2/linkTest.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.outer-container {
2+
display:inline-block;
3+
margin: 0.2em;
4+
border: 2px solid red;
5+
}
6+
7+
.text-container {
8+
padding-right: 0.3em;
9+
font-size: 2em;
10+
font-style: italic;
11+
font-family: 'Impact';
12+
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
13+
background-clip: text;
14+
-webkit-background-clip: text;
15+
text-fill-color: transparent;
16+
-webkit-text-fill-color: transparent;
17+
}
18+
19+
.cat-container {
20+
height: 250px;
21+
width: 340px;
22+
background-size: cover;
23+
background-image: url("cat.jpg");
24+
}

‎demo2/module.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>linkInShadow module</title>
5+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
6+
<script type="module">
7+
import {CSSModuleTestElement} from "./cssModuleElement.js";
8+
window.customElements.define("css-module-test-element", CSSModuleTestElement);
9+
</script>
10+
<script>
11+
function loadHandler() {
12+
setTimeout(() => {
13+
let element = document.createElement("css-module-test-element");
14+
document.body.appendChild(element);
15+
}, 25);
16+
}
17+
</script>
18+
</head>
19+
<body onload="loadHandler()">
20+
<!-- <css-module-test-element></css-module-test-element>
21+
<css-module-test-element></css-module-test-element> -->
22+
</body>
23+
</html>

‎demo2/noModule.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>linkInShadow noModule</title>
5+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
6+
<script type="module">
7+
import {LinkTestElement} from "./linkInShadowElement.js";
8+
window.customElements.define("link-in-shadow-test-element", LinkTestElement);
9+
</script>
10+
<script>
11+
function loadHandler() {
12+
setTimeout(() => {
13+
let element = document.createElement("link-in-shadow-test-element");
14+
document.body.appendChild(element);
15+
}, 25);
16+
}
17+
</script>
18+
</head>
19+
<body onload="loadHandler()">
20+
<!-- <link-in-shadow-test-element></link-in-shadow-test-element>
21+
<link-in-shadow-test-element></link-in-shadow-test-element> -->
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)