forked from oslego/shadow-dom-regions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (71 loc) · 3.29 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!--
This code is licensed under Creative Commons and dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
Author: Razvan Caliman ([email protected])
Learn, create and have fun! ;)
-->
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Regions and Shadow DOM</title>
<meta charset="UTF-8">
<style type="text/css" name="shadow-style">
article{
-webkit-flow-into: myFlow;
}
.region{
-webkit-flow-from: myFlow;
width: 35%;
float: left;
padding: 5%;
height: 350px;
outline: 1px solid green;
}
</style>
</head>
<body>
<article>
<h1>CSS Regions and Shadow DOM sitting in a DOM tree.</h1>
<p>This experiment shows how CSS Regions interact with Shadow DOM.</p>
<p>Be sure you're using <a href="http://tools.google.com/dlpage/chromesxs" title="Chrome Canary - Google">a browser</a> supporting Shadow DOM, CSS Regions and scoped styles.</p>
<p>
If this works, you should see two boxes with text and green borders. When you resize the browser window the text should flow from one box to another.
</p>
<p>
There should be no <code><div class="region"></code> elements under the document <code>body</code>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<script type="text/javascript">
if (!window.WebKitShadowRoot){
document.body.innerHTML = 'No Shadow DOM support. Use <a href="http://tools.google.com/dlpage/chromesxs">Google Chrome Canary</a>'
}
else{
var host = document.querySelector("body");
var root = new WebKitShadowRoot(host);
var article = document.querySelector("article");
var style = document.querySelector("style[name='shadow-style']");
// ShadowRoot.applyAuthorStyles should tell the ShadowRoot to inherit the styles declared outside its boundaries.
// By default the DOM under the ShadowRoot will NOT inherit styles defined outside.
if (typeof root.applyAuthorStyles === "undefined"){
// move the original stylesheet under the ShadowRoot
root.appendChild(style);
// scope the stylesheet to apply under the ShadowRoot
style.scoped = true;
}
else{
// the syles declared outside should apply under the ShadowRoot
root.applyAuthorStyles = true;
}
var region1 = document.createElement("div");
region1.className = "region";
var region2 = region1.cloneNode(false);
root.appendChild(article);
root.appendChild(region1);
root.appendChild(region2);
}
</script>
</body>
</html>