Skip to content

Commit c759474

Browse files
klebbaklebba
authored
Reworks CSP and CSS in demos; noop (#290)
1 parent 894037d commit c759474

20 files changed

+183
-166
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
99
```
1010

11-
A dead simple starting point for custom elements. It provides the following functionality:
11+
A dead simple basis for custom elements. It provides the following functionality:
1212

1313
- Efficient DOM generation and data binding using your preferred [templating engine](./doc/TEMPLATES.md)
1414
- Automatic `.property` to `[attribute]` reflection (opt-in)

‎demo/chess/chess-piece.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
:host {
2+
display: block;
3+
width: var(--hello-size, 8rem);
4+
height: var(--hello-size, 8rem);
5+
background-color: cyan;
6+
border-radius: 50%;
7+
margin: 0.25rem;
8+
box-sizing: border-box;
9+
transition-duration: 250ms;
10+
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
11+
transition-property: transform, border;
12+
will-change: transform;
13+
cursor: pointer;
14+
}
15+
16+
#container {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
height: 100%;
21+
font-size: calc(var(--hello-size, 8rem) * calc(5/11));
22+
}
23+
24+
:host([rank="\2655"]) {
25+
border: 4px dotted hsl(120, 100%, 50%);
26+
background-color: yellow;
27+
transform: rotateX(15deg) rotateY(15deg);
28+
}
29+
30+
:host([rank="\2654"]) {
31+
border: 3px solid hsl(270, 100%, 50%);
32+
background-color: magenta;
33+
color: blue;
34+
transform: rotateX(-10deg) rotateY(-15deg);
35+
}
36+
37+
:host(:not([rank])),
38+
:host([rank=""]) {
39+
background-color: #ccc;
40+
}
41+
42+
:host(:hover) {
43+
border: 3px solid hsl(180, 100%, 50%);
44+
transform: translateZ(-25px);
45+
}
46+
47+
:host(:focus) {
48+
border: 12px solid hsl(90, 100%, 50%);
49+
outline: none;
50+
}
51+
52+
#container:empty::before {
53+
content: '\265F';
54+
}

‎demo/chess/chess-piece.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import XElement from '../../x-element.js';
2+
import styleSheet from './chess-piece.css' with { type: 'css' };
3+
4+
class ChessPieceElement extends XElement {
5+
static get styles() {
6+
return [styleSheet];
7+
}
8+
9+
static get properties() {
10+
return {
11+
rank: {
12+
type: String,
13+
reflect: true,
14+
},
15+
elementTabIndex: {
16+
type: Number,
17+
initial: 1,
18+
observe: (host, value) => { host.tabIndex = value; },
19+
},
20+
};
21+
}
22+
23+
static template(html) {
24+
return ({ rank }) => {
25+
return html`<div id="container">${rank}</div>`;
26+
};
27+
}
28+
}
29+
30+
customElements.define('chess-piece', ChessPieceElement);

‎demo/chess/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="content-security-policy" content="default-src 'self';">
66
<link rel="stylesheet" href="index.css">
7-
<script type="module" src="index.js"></script>
7+
<script type="module" blocking="render" src="chess-piece.js"></script>
88
</head>
99
<body>
1010
<div id="container">

‎demo/chess/index.js

-86
This file was deleted.

‎demo/hello-element.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
:host {
2+
display: contents;
3+
}
4+
5+
#container {
6+
position: fixed;
7+
--width: 150px;
8+
--height: 150px;
9+
--font-size: 13px;
10+
font-weight: bold;
11+
line-height: calc(var(--font-size) * 1.8);
12+
font-size: var(--font-size);
13+
top: calc(0px - var(--width) / 2);
14+
left: calc(0px - var(--height) / 2);
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
width: var(--width);
19+
height: var(--height);
20+
transform: translate(calc(0vw - var(--width)), 50vh) rotate(0deg);
21+
opacity: 1;
22+
transform-origin: center;
23+
border-radius: 100vmax;
24+
cursor: default;
25+
}
26+
27+
#logo {
28+
padding-bottom: var(--font-size);
29+
}

‎demo/index.js ‎demo/hello-element.js

+2-34
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import XElement from '../x-element.js';
2+
import styleSheet from './hello-element.css' with { type: 'css' };
23

34
const logo = `\
45
_________
@@ -10,38 +11,6 @@ const logo = `\
1011

1112
class HelloElement extends XElement {
1213
static get styles() {
13-
const styleSheet = new CSSStyleSheet();
14-
styleSheet.replaceSync(`\
15-
:host {
16-
display: contents;
17-
}
18-
19-
#container {
20-
position: fixed;
21-
--width: 150px;
22-
--height: 150px;
23-
--font-size: 13px;
24-
font-weight: bold;
25-
line-height: calc(var(--font-size) * 1.8);
26-
font-size: var(--font-size);
27-
top: calc(0px - var(--width) / 2);
28-
left: calc(0px - var(--height) / 2);
29-
display: flex;
30-
align-items: center;
31-
justify-content: center;
32-
width: var(--width);
33-
height: var(--height);
34-
transform: translate(calc(0vw - var(--width)), 50vh) rotate(0deg);
35-
opacity: 1;
36-
transform-origin: center;
37-
border-radius: 100vmax;
38-
cursor: default;
39-
}
40-
41-
#logo {
42-
padding-bottom: var(--font-size);
43-
}
44-
`);
4514
return [styleSheet];
4615
}
4716

@@ -73,5 +42,4 @@ class HelloElement extends XElement {
7342
}
7443
}
7544

76-
77-
customElements.define('hello-world', HelloElement);
45+
customElements.define('hello-element', HelloElement);

‎demo/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="utf-8">
55
<meta http-equiv="content-security-policy" content="default-src 'self';">
66
<link rel="stylesheet" href="index.css">
7-
<script type="module" src="index.js"></script>
7+
<script type="module" blocking="render" src="hello-element.js"></script>
88
</head>
99
<body>
1010
<div id="content">
1111
<h1 id="title"><a id="title-link" href="../x-element.js">x-element</a></h1>
12-
<h2 id="tagline">A dead simple starting point for custom elements.</h2>
12+
<h2 id="tagline">A dead simple basis for custom elements.</h2>
1313
<p id="label">Examples</p>
1414
<ul id="list">
1515
<li><a href="./chess">chess piece</a></li>
@@ -20,6 +20,6 @@ <h2 id="tagline">A dead simple starting point for custom elements.</h2>
2020
<li><a href="./performance">performance</a></li>
2121
</ul>
2222
</div>
23-
<hello-world id="x"></hello-world>
23+
<hello-element id="x"></hello-element>
2424
</body>
2525
</html>

‎demo/lit-html/base-element.js

-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
2222
import { until } from 'lit-html/directives/until.js';
2323
import { when } from 'lit-html/directives/when.js';
2424

25-
2625
export default class BaseElement extends XElement {
2726
// Use lit-html's template engine rather than the built-in x-element engine.
2827
static get templateEngine() {

‎demo/lit-html/demo-lit-html.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#container[emoji]::before {
2+
content: " " attr(emoji);
3+
font-size: 2rem;
4+
}

‎demo/lit-html/demo-lit-html.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import BaseElement from './base-element.js';
2+
import styleSheet from './demo-lit-html.css' with { type: 'css' };
23

34
export default class DemoLitHtml extends BaseElement {
45
static get styles() {
5-
const styleSheet = new CSSStyleSheet();
6-
styleSheet.replaceSync(`
7-
#container[emoji]::before {
8-
content: " " attr(emoji);
9-
font-size: 2rem;
10-
}
11-
`);
126
return [styleSheet];
137
}
148

‎demo/lit-html/index.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-vpd4e6Q2EYlXOAcBOCPYNRqOSK1caV1iPamby7fBE30=' https://esm.sh/[email protected]/;">
5+
<meta http-equiv="content-security-policy" content="
6+
default-src 'self';
7+
script-src 'self' 'sha256-vpd4e6Q2EYlXOAcBOCPYNRqOSK1caV1iPamby7fBE30='
8+
https://esm.sh/[email protected]/;">
69
<script type="importmap">
710
{
811
"imports": {
912
"lit-html/": "https://esm.sh/[email protected]/"
1013
}
1114
}
1215
</script>
13-
<script type="module" src="./demo-lit-html.js"></script>
16+
<script type="module" blocking="render" src="./demo-lit-html.js"></script>
1417
</head>
1518
<body>
1619
<ol>

‎demo/performance/lit-html.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@
44
<meta charset="utf-8">
55
<!-- We use “unsafe-eval” below because we need to trick the browser into
66
not caching tagged template string objects to test interpretation. -->
7-
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'sha256-2gPcHEAV/bRWIxMnz3UA5z6w2m9RdFis8ZAa8Y/EZVg=' https://esm.sh/[email protected] https://esm.sh/[email protected]/;">
7+
<meta http-equiv="content-security-policy" content="
8+
default-src 'self';
9+
script-src 'self' 'unsafe-eval' 'sha256-2gPcHEAV/bRWIxMnz3UA5z6w2m9RdFis8ZAa8Y/EZVg='
10+
https://esm.sh/[email protected]
11+
https://esm.sh/[email protected]/;">
812
<script type="importmap">
913
{
1014
"imports": {

‎demo/performance/react.html

+8-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<!-- TODO: The react library has a bunch of dependencies which makes the CSP
6-
unwieldy. Rather than enumerate them all, a blanket rule is encoded
7-
below to allow any access to https://esm.sh/. You wouldn’t want to do
8-
that on a production site, this is just for the demo. -->
9-
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA=' https://esm.sh/;">
5+
<meta http-equiv="content-security-policy" content="
6+
default-src 'self';
7+
script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA='
8+
https://esm.sh/[email protected]
9+
https://esm.sh/[email protected]/
10+
https://esm.sh/[email protected]/
11+
https://esm.sh/scheduler@^0.23.2
12+
https://esm.sh/[email protected]/;">
1013
<script type="importmap">
1114
{
1215
"imports": {

0 commit comments

Comments
 (0)