-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (76 loc) · 3.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Future Web</title>
<!-- <link rel="import" href="mmmbop-menu-item.html">-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="app">
<mmmbop-title>MyMatch MeetBook Overflow Plus</mmmbop-title>
<mmmbop-welcome>[NAME]</mmmbop-welcome>
<mmmbop-menu>
<mmmbop-menu-item>Drip</mmmbop-menu-item>
<mmmbop-menu-item>Profile</mmmbop-menu-item>
<mmmbop-menu-item>Settings</mmmbop-menu-item>
</mmmbop-menu>
</section>
<section class="examples">
<!-- UNRESOLVED, but Valid, custom element -->
<mmmbop-drip feed="drops"></mmmbop-drip>
<!--INVALID CUSTOM ELEMENT Node Name (no dash) -->
<song>Bop bop doo wop!</song>
<!--Prototype is HTMLUnknownElement-->
</section>
<!-- A template to be used by a custom element -->
<template id="mmmbop-menu-template">
<h3>Menu</h3>
<ul>
<content></content>
</ul>
</template>
<script>
/*
// Custom Element Registration with document.registerElement
document.registerElement('mmmbop-title', {
// The prototype that the custom element inherits from defaults to HTMLElement, but can be virtualy any element
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
// This would normally set the value of the custom element
value: function() {
this.innerHTML = '<style>.myspace { background: black; color: white; font-family: sans-serif; text-transform: lowercase; padding: 0 .1em; } .match { background: white; color: blue; font-family: monospace; text-transform: lowercase; font-size: 1.5em; } .meetup { border-top: 10px solid red; border-bottom: 10px solid red; font-family: cursive; } .facebook { background: #3366AA; color: white; font-family: monospace; text-transform: lowercase; padding: 0 .1em; font-size: 1.5em;} .stackoverflow { font-weight: bold; font-family: monospace; font-size: 1.5em; text-transform: lowercase; } .plus { background: #d84337; font-weight: bold; font-family: sans-serif; padding: 0 .1em; color: white;} </style><span class="myspace">My</span><span class="match">Match</span> <span class="meetup">Meet</span><span class="facebook">Book</span> <span class="stackoverflow">Overflow</span> <span class="plus">Plus</span></h1>';
}
}
})
});
// Custom Element Registration with Shadow DOM
document.registerElement('mmmbop-welcome', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
// Adds the #shadow-root to the element
var root = this.createShadowRoot();
// <content> represents the non-Shadow innards of the element
root.innerHTML = 'Welcome to MMMBOP, <content></content>!';
}
}
})
});
// Custom Element Registration using a <template>
document.registerElement('mmmbop-menu', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
// The <template> tag is not visible in the browser, but can still be used
var t = document.querySelector('#mmmbop-menu-template');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
})
});
*/
</script>
</body>
</html>