elements
20 | { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
21 |
22 | // Zoom in and out with Alt+click
23 | { src: 'plugin/zoom-js/zoom.js', async: true },
24 |
25 | // Speaker notes
26 | { src: 'plugin/notes/notes.js', async: true },
27 |
28 | // MathJax
29 | { src: 'plugin/math/math.js', async: true }
30 | ]
31 | });
32 |
33 | event.target.removeEventListener(event.type, init);
34 | }
35 |
36 | document.addEventListener('DOMContentLoaded', init);
37 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web-components-are-coming",
3 | "version": "0.0.0",
4 | "main": "src/index.ts",
5 | "scripts": {
6 | "build": "webpack --config ./webpack/webpack.dev.js",
7 | "clean": "rimraf dist/*",
8 | "serve": "webpack-dev-server --config ./webpack/webpack.dev.js --port 3000 --host 0.0.0.0",
9 | "start": "yarn serve"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/haydenbr/web-components-are-coming"
14 | },
15 | "author": "haydenbr",
16 | "license": "MIT",
17 | "devDependencies": {
18 | "ajv": "^5.0.0",
19 | "autoprefixer": "^7.2.6",
20 | "chalk": "^2.3.1",
21 | "copy-webpack-plugin": "^4.4.1",
22 | "css-loader": "^0.28.9",
23 | "extract-loader": "3.1.0",
24 | "file-loader": "4.1.0",
25 | "html-loader": "^0.5.5",
26 | "node-sass": "^4.7.2",
27 | "pngquant-bin": "3.1.1",
28 | "postcss": "^6.0.17",
29 | "postcss-loader": "3.0.0",
30 | "rimraf": "^2.6.2",
31 | "sass-loader": "^6.0.6",
32 | "source-map": "^0.7.0",
33 | "ts-loader": "^6.0.4",
34 | "typescript": "^3.5.3",
35 | "webpack": "4.39.1",
36 | "webpack-dev-server": "3.7.2",
37 | "write-file-webpack-plugin": "^4.2.0"
38 | },
39 | "dependencies": {
40 | "lit-element": "^2.2.1",
41 | "lit-html": "1.0.0",
42 | "reveal.js": "3.6.0",
43 | "webpack-cli": "^3.3.6"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/examples/cool-tab-group.lit-html.component.js:
--------------------------------------------------------------------------------
1 | import { html, render } from 'lit-html';
2 |
3 | const style = `
4 | :host {
5 | align-items: center;
6 | display: flex;
7 | justify-content: center;
8 | }
9 | `;
10 |
11 | class CoolTabGroup extends HTMLElement {
12 | constructor() {
13 | super();
14 |
15 | this._value = undefined;
16 | }
17 |
18 | connectedCallback() {
19 | this.attachShadow({ mode: 'open' });
20 |
21 | this.addEventListener('tabselect', (event) => this.value = event.target.value);
22 | this.value = this.defaultValue;
23 | // setTimeout(() => this.render());
24 | this.render()
25 | }
26 |
27 | disconnectedCallback() {
28 | this.removeEventListener('tabselect');
29 | }
30 |
31 | get defaultValue() {
32 | return this.getAttribute('value') || '';
33 | }
34 |
35 | get value() {
36 | return this._value;
37 | }
38 |
39 | set value(newValue) {
40 | if (newValue === this.value) {
41 | return;
42 | }
43 |
44 | let oldValue = this._value;
45 | this._value = newValue;
46 | this.render();
47 | this.dispatchTabChange({ oldValue, newValue });
48 | }
49 |
50 | get tabButtons() {
51 | return Array.from(this.querySelectorAll('cool-tab'));
52 | }
53 |
54 | dispatchTabChange(payload) {
55 | this.dispatchEvent(new CustomEvent('tabchange', { bubbles: true, detail: payload }));
56 | }
57 |
58 | render() {
59 | this.tabButtons.forEach((tab) => tab.selected = (tab.value === this.value));
60 |
61 | render(html`
62 |
63 | is cool!!!
26 |
28 | Intro to Web Components 📦
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
27 |
28 | Intro to Web Components
29 |
30 |
31 | 
32 |
33 |
34 |
35 |
36 |
37 |
38 | Hayden Braxton
39 | @hayden_dev
40 |
41 |
42 |
43 |
44 |
48 | 
49 |
50 | 
51 |
52 |
53 |
54 |
60 |
61 |
62 | What are Web Components?
63 |
64 |
65 |
76 |
77 |
78 | Why should I care?
79 |
80 |
81 |
85 | Cross-framework compatability
86 |
87 | 
88 |
89 |
90 |
94 | Ship less code
95 |
96 | 
97 |
98 |
99 |
103 | Potentially better performance
104 |
105 | 
106 |
107 |
108 |
112 | More semantic markup
113 |
114 | 
115 |
116 |
117 |
121 | Bundle markup, styles, and scripts together
122 | 
123 |
124 |
125 |
126 | What about browser support?
127 |
128 |
129 |
133 | 
134 |
135 |
136 |
137 | Demos!
138 | 
139 |
140 |
141 |
155 |
156 |
159 | (opinion warning)
160 |
161 |
162 |
166 | WEB COMPONENTS ARE THE FUTURE! NO MORE FRAMEWORKS!
167 |
168 | 
169 |
177 |
178 |
179 |
183 | Tools
184 |
185 |
186 | 
Polymer
187 |
188 |
189 | 
Stencil
190 |
191 |
192 | 
Ionic Framework
193 |
194 |
195 |
196 |
206 |
207 |
229 |
230 |
234 |
235 | 
236 |
237 |
238 |
239 |
240 |
241 | 
242 |
243 |
244 |
245 |
246 |
247 |
--------------------------------------------------------------------------------