Skip to content

Commit c9f7d4e

Browse files
RoyalIcingRoyalIcing
committed
Add custom elements cheatsheet
1 parent 51153b2 commit c9f7d4e

File tree

2 files changed

+112
-95
lines changed

2 files changed

+112
-95
lines changed

‎lib/components_guide_web/templates/cheatsheets/astro.html.md

Lines changed: 7 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -8,98 +8,10 @@ class = "italic"
88
<p class={class}><%= a %>?</p>
99
<p class={class}><%= class %></p>
1010

11-
<script>
12-
window.customElements.define('custom-element', class extends HTMLElement {
13-
connectedCallback() {
14-
console.log('connectedCallback called');
15-
const name = this.getAttribute('name');
16-
const source = this;
17-
18-
// Attempt to wait until the inner template has been added as a child node.
19-
const observer = new MutationObserver((mutationList, observer) => {
20-
outer: for (const mutation of mutationList) {
21-
for (const node of mutation.addedNodes.values()) {
22-
if (node instanceof HTMLTemplateElement) {
23-
doDefine();
24-
observer.disconnect();
25-
break outer;
26-
}
27-
}
28-
}
29-
});
30-
observer.observe(this, { childList: true });
31-
32-
// class NewElement extends HTMLElement {
33-
34-
// }
35-
36-
function doDefine() {
37-
window.customElements.define(name, class extends HTMLElement {
38-
ensureTemplate() {
39-
if (this.hasAddedTemplate) return;
40-
41-
const template = source.querySelector('template');
42-
const fragment = template.content.cloneNode(true);
43-
this.attachShadow({mode: 'open'}).appendChild(fragment);
44-
// this.append(fragment);
45-
46-
this.hasAddedTemplate = true;
47-
}
48-
49-
connectedCallback() {
50-
this.ensureTemplate();
51-
}
52-
53-
static get observedAttributes() {
54-
const template = source.querySelector('template');
55-
const slots = template.content.querySelectorAll('slot');
56-
const slotNames = Array.from(slots, slot => slot.name);
57-
return slotNames;
58-
}
59-
60-
attributeChangedCallback(name, oldValue, newValue) {
61-
this.ensureTemplate();
62-
for (const node of this.querySelectorAll(`slot[name="${name}"]`).values()) {
63-
node.remove();
64-
}
65-
this.append(Object.assign(this.ownerDocument.createElement('span'), { textContent: newValue, slot: name }));
66-
}
67-
});
68-
}
69-
}
70-
});
71-
</script>
72-
73-
<script>
74-
window.customElements.define('custom-element3', class extends HTMLElement {
75-
connectedCallback() {
76-
const name = this.getAttribute('name');
77-
const source = this;
78-
console.log(this.innerHTML);
79-
80-
window.customElements.define(name, class extends HTMLElement {
81-
connectedCallback() {
82-
const template = source.querySelector('template');
83-
const fragment = template.content.cloneNode(true);
84-
this.attachShadow({mode: 'open'}).appendChild(fragment);
85-
}
86-
});
87-
}
88-
});
89-
</script>
90-
91-
<custom-element name="hello-there">
92-
<template>Hello <slot name="subject">World</slot>.</template>
93-
</custom-element>
94-
95-
<hello-there></hello-there>
96-
<hello-there><span slot="subject">Universe</span></hello-there>
97-
<hello-there subject="Props"></hello-there>
98-
99-
<custom-element name="custom-script">
100-
<template>
101-
<script>console.log("Inside template", document.currentScript)</script>
102-
</template>
103-
</custom-element>
104-
105-
<custom-script></custom-script>
11+
```astro
12+
---
13+
title: When WebAssembly is faster
14+
description: The overhead of the network vs the overhead of WebAssembly
15+
layout: ../../layouts/MainLayout.astro
16+
---
17+
```

‎lib/components_guide_web/templates/cheatsheets/custom-elements.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
a = 4 + 3
3+
class = "italic"
4+
---
5+
6+
# Custom Elements
7+
8+
<p class={class}><%= a %>?</p>
9+
<p class={class}><%= class %></p>
10+
11+
<script>
12+
window.customElements.define('custom-element', class extends HTMLElement {
13+
connectedCallback() {
14+
console.log('connectedCallback called');
15+
const name = this.getAttribute('name');
16+
const source = this;
17+
18+
// Attempt to wait until the inner template has been added as a child node.
19+
const observer = new MutationObserver((mutationList, observer) => {
20+
outer: for (const mutation of mutationList) {
21+
for (const node of mutation.addedNodes.values()) {
22+
if (node instanceof HTMLTemplateElement) {
23+
doDefine();
24+
observer.disconnect();
25+
break outer;
26+
}
27+
}
28+
}
29+
});
30+
observer.observe(this, { childList: true });
31+
32+
// class NewElement extends HTMLElement {
33+
34+
// }
35+
36+
function doDefine() {
37+
window.customElements.define(name, class extends HTMLElement {
38+
ensureTemplate() {
39+
if (this.hasAddedTemplate) return;
40+
41+
const template = source.querySelector('template');
42+
const fragment = template.content.cloneNode(true);
43+
this.attachShadow({mode: 'open'}).appendChild(fragment);
44+
// this.append(fragment);
45+
46+
this.hasAddedTemplate = true;
47+
}
48+
49+
connectedCallback() {
50+
this.ensureTemplate();
51+
}
52+
53+
static get observedAttributes() {
54+
const template = source.querySelector('template');
55+
const slots = template.content.querySelectorAll('slot');
56+
const slotNames = Array.from(slots, slot => slot.name);
57+
return slotNames;
58+
}
59+
60+
attributeChangedCallback(name, oldValue, newValue) {
61+
this.ensureTemplate();
62+
for (const node of this.querySelectorAll(`slot[name="${name}"]`).values()) {
63+
node.remove();
64+
}
65+
this.append(Object.assign(this.ownerDocument.createElement('span'), { textContent: newValue, slot: name }));
66+
}
67+
});
68+
}
69+
}
70+
});
71+
</script>
72+
73+
<script>
74+
window.customElements.define('custom-element3', class extends HTMLElement {
75+
connectedCallback() {
76+
const name = this.getAttribute('name');
77+
const source = this;
78+
console.log(this.innerHTML);
79+
80+
window.customElements.define(name, class extends HTMLElement {
81+
connectedCallback() {
82+
const template = source.querySelector('template');
83+
const fragment = template.content.cloneNode(true);
84+
this.attachShadow({mode: 'open'}).appendChild(fragment);
85+
}
86+
});
87+
}
88+
});
89+
</script>
90+
91+
<custom-element name="hello-there">
92+
<template>Hello <slot name="subject">World</slot>.</template>
93+
</custom-element>
94+
95+
<hello-there></hello-there>
96+
<hello-there><span slot="subject">Universe</span></hello-there>
97+
<hello-there subject="Props"></hello-there>
98+
99+
<custom-element name="custom-script">
100+
<template>
101+
<script>console.log("Inside template", document.currentScript)</script>
102+
</template>
103+
</custom-element>
104+
105+
<custom-script></custom-script>

0 commit comments

Comments
 (0)