Skip to content

Commit d2aaa5f

Browse files
ianmcburnieianmcburnie
committed
Using newer declarative shadow root
1 parent 564bda3 commit d2aaa5f

25 files changed

Lines changed: 16979 additions & 4355 deletions

‎README.md‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
# makeup-web-components (archived)
1+
# makeup-web-components
22

33
Experimental testing ground for accessible web components built on top of [makeup-js](https://github.com/makeup/makeup-js).
44

5-
## Client-Side Web Components (archived)
5+
* makeup-switch-element: [source](packages/makeup-switch-element/src/index.js) | [demo](https://makeup.github.io/makeup-ui/makeup-switch-element/index.html)
66

7-
* Switch: [source](packages/makeup-switch-element/src/index.js) | [demo](https://makeup.github.io/makeup-ui/makeup-switch-element/index.html)
8-
9-
## Server-Side Web Components (archived)
10-
11-
NOTE: the origin-trial certificate that enable these SSR experiments has expired.
12-
13-
* Switch SSR: [source](packages/makeup-switch-element-ssr/src/index.js) | [demo](https://makeup.github.io/makeup-ui/makeup-switch-element-ssr/index.html)

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>makeup-web-components demo (archived)</title>
4+
<title>makeup-web-components demo</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1"/>
66
<link rel="icon" href="favicon.ico" type="image/x-icon">
77
</head>
88
<body>
99
<main role="main">
10-
<h1>makeup-web-components demo (archived)</h1>
10+
<h1>makeup-web-components demo</h1>
1111
<ul>
1212
<li><a href="makeup-switch-element/index.html">makeup-switch-element</a></li>
1313
</ul>

‎docs/makeup-switch-element-ssr/index.compiled.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎docs/makeup-switch-element-ssr/index.html‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎docs/makeup-switch-element-ssr/index.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docs/makeup-switch-element-ssr/index.min.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/makeup-switch-element-ssr/index.min.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/makeup-switch-element/index.compiled.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
"use strict";
22

3-
// requires NodeList.forEach polyfill for IE
4-
require('nodelist-foreach-polyfill');
5-
6-
var MakeupSwitchElement = require('../../packages/makeup-switch-element');
7-
3+
const MakeupSwitchElement = require('../../packages/makeup-switch-element');
84
window.onload = function () {
95
document.querySelectorAll('makeup-switch').forEach(function (el, i) {
106
console.log(el, i);

‎docs/makeup-switch-element/index.html‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
45
<title>makeup-switch-element</title>
56
<link href="../makeup-switch-style/docs.css" rel="stylesheet" />
67
<!-- <link href="../makeup-switch-style/theme-1.css" rel="stylesheet" /> -->
@@ -12,22 +13,75 @@
1213
<h1>makeup-switch-element</h1>
1314
</header>
1415
<main>
16+
<h2>Declarative</h2>
1517
<ul>
1618
<li>
1719
<span id="label1">makeup-switch 1</span>
18-
<makeup-switch labelledby="label1" placeholder="true"></makeup-switch>
20+
<makeup-switch labelledby="label1">
21+
<template shadowrootmode="open">
22+
<link href="../makeup-switch-style/switch.css" rel="stylesheet" />
23+
<span class="switch">
24+
<span class="switch__control" role="switch" tabindex="0"></span>
25+
<span class="switch__button"></span>
26+
</span>
27+
</template>
28+
</makeup-switch>
1929
</li>
2030
<li>
2131
<span id="label2">makeup-switch 2</span>
22-
<makeup-switch labelledby="label2" placeholder="true" checked></makeup-switch>
32+
<makeup-switch labelledby="label2" checked>
33+
<template shadowrootmode="open">
34+
<link href="../makeup-switch-style/switch.css" rel="stylesheet" />
35+
<span class="switch">
36+
<span class="switch__control" role="switch" tabindex="0"></span>
37+
<span class="switch__button"></span>
38+
</span>
39+
</template>
40+
</makeup-switch>
2341
</li>
2442
<li>
2543
<span id="label3">makeup-switch 3</span>
26-
<makeup-switch labelledby="label3" placeholder="true" disabled></makeup-switch>
44+
<makeup-switch labelledby="label3" disabled>
45+
<template shadowrootmode="open">
46+
<link href="../makeup-switch-style/switch.css" rel="stylesheet" />
47+
<span class="switch">
48+
<span class="switch__control" role="switch" tabindex="0"></span>
49+
<span class="switch__button"></span>
50+
</span>
51+
</template>
52+
</makeup-switch>
2753
</li>
2854
<li>
2955
<span id="label4">makeup-switch 4</span>
30-
<makeup-switch labelledby="label4" placeholder="true" checked disabled></makeup-switch>
56+
<makeup-switch labelledby="label4" checked disabled>
57+
<template shadowrootmode="open">
58+
<link href="../makeup-switch-style/switch.css" rel="stylesheet" />
59+
<span class="switch">
60+
<span class="switch__control" role="switch" tabindex="0"></span>
61+
<span class="switch__button"></span>
62+
</span>
63+
</template>
64+
</makeup-switch>
65+
</li>
66+
</ul>
67+
68+
<h2>Imperative</h2>
69+
<ul>
70+
<li>
71+
<span id="label5">makeup-switch 5</span>
72+
<makeup-switch labelledby="label5" placeholder="true"></makeup-switch>
73+
</li>
74+
<li>
75+
<span id="label6">makeup-switch 6</span>
76+
<makeup-switch labelledby="label6" placeholder="true" checked></makeup-switch>
77+
</li>
78+
<li>
79+
<span id="label7">makeup-switch 7</span>
80+
<makeup-switch labelledby="label7" placeholder="true" disabled></makeup-switch>
81+
</li>
82+
<li>
83+
<span id="label8">makeup-switch 8</span>
84+
<makeup-switch labelledby="label8" placeholder="true" checked disabled></makeup-switch>
3185
</li>
3286
</ul>
3387
</main>

‎docs/makeup-switch-element/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// requires NodeList.forEach polyfill for IE
2-
require('nodelist-foreach-polyfill');
3-
41
const MakeupSwitchElement = require('../../packages/makeup-switch-element');
52

63
window.onload = function() {

0 commit comments

Comments
 (0)