-
Notifications
You must be signed in to change notification settings - Fork 4
/
root.js
76 lines (62 loc) · 2.3 KB
/
root.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import XElement from './x-element.js';
import Highlight from './highlight.js';
export default class XRoot extends XElement {
example = `
import XElement from '/x-element.js';
MyElement extends XElement {
greeting: '',
greet () { this.greeting = 'Greeting'; }
constructor () {
super();
this.greeting = 'Hello World';
this.shadowRoot.innerHTML = \`
<h1>{{title}}</h1 >
<button onclick="{{greet()}}">Greet</button>;
\`;
}
}
MyElement.define();
`;
#html = /*html*/`
<section>
<h2>Vision</h2>
<h4>X-Element's vision is to provide an agnostic non framework that enhances custom elements with functionality and data binding that mimics native custom element standards.</h4>
<h2>Features</h2>
<div class="tiles">
<div class="tile">
<h4>👶 Simple</h4>
<span>Simple to learning if you know custom elements you know XElement.</span>
</div>
<div class="tile">
<h4>📦 Shareable</h4>
<span>A single class to build a single component or an entire app.</span>
</div>
<div class="tile">
<h4>⚡ Fast</h4>
<span>Tiny footprint ~15KB (minified and compressed).</span>
</div>
<div class="tile">
<h4>🏗 Framework Agnostic</h4>
<span>Use XElement with any framework - React, Vue, Angular...</span>
</div>
</div>
<h2>Example</h2>
<pre><code class="language-js">{{example}}</code></pre>
</section>
`;
// constructor () {
// super();
// this.shadowRoot.innerHTML = '<slot></slot>';
// }
connectedCallback () {
console.log('root connected');
if (this.innerHTML) return;
this.shadowRoot.innerHTML = '<slot></slot>';
this.innerHTML = this.#html;
requestAnimationFrame(() => {
Highlight();
// document.body.style.opacity = 1;
});
}
}
// XRoot.define();