-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
75 lines (69 loc) · 2.79 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><declarative-shadow-dom></title>
<link rel="stylesheet" href="https://juicy.github.io/github-markdown-css/github-markdown.css">
<!-- Imports CE is="" polyfill -->
<script>this.customElements||document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');</script>
<script src="//unpkg.com/@ungap/custom-elements-builtin"></script>
<script src="declarative-shadow-dom.js"></script>
</head>
<body class="markdown-body">
<template is="declarative-shadow-dom" mode="open">
<!-- That is your #shadow-root -->
<style>
:host(.markdown-body){
height: 100%;
margin: 1em auto;
width: 70%;
}
img{
position: absolute;
top: 0;
right: 0;
border: 0;
}
#panes{
display: flex;
justify-content: space-between;
}
/** Support for ShadyDOM polyfilled browsers
https://github.com/webcomponents/shadycss/issues/128 */
.markdown-body{
height: 100%;
margin: 1em auto;
width: 70%;
}
</style>
<a href="https://github.com/tomalec/declarative-shadow-dom"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<slot name="header"></slot>
<div id="panes">
<slot name="solves"></slot>
<slot name="code-sample"></slot>
</div>
<slot></slot>
</template>
<h1 slot="header">declarative-shadow-dom</h1>
<blockquote slot="header">
Custom Element to create Shadow DOM in a declarative manner
</blockquote>
<ul slot="solves">
<li>Ever wanted declarative syntax for Shadow DOM?</li>
<li>Scoped CSS without JS magic?</li>
<li>Confused that `#shadow-root` is used in tutorials and dev tools, but does not work in actual HTML?</li>
<li>Or just felt jealous, that spec editors can use this syntax and you cannot?</li>
</ul>
<section slot="code-sample">
Check the source of this page. Now, you can simply do:
<pre><code><anyelement>
<template is="declarative-shadow-dom">
Shadow Content here
<slot></slot>
</template>
Light DOM content here
</anyelement></code></pre>
</section>
<p>For more check the <a href="https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Declarative-Shadow-DOM.md">Declarative Shadow DOM Spec proposal</a> and <a href="https://github.com/tomalec/declarative-shadow-dom/blob/master/README.md">README.md</a></p>
</body>
</html>