UNPKG

2.5 kBHTMLView Raw
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html lang="en">
12<head>
13 <title>demo-snippet demo</title>
14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17
18 <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
19
20 <script type="module" src="../demo-snippet.js"></script>
21 <script type="module" src="../demo-pages-shared-styles.js"></script>
22 <script type="module" src="./simple-button.js"></script>
23
24 <script type="module">
25 import {html} from '@polymer/polymer/lib/utils/html-tag.js';
26 const template = html`
27 <custom-style>
28 <style is="custom-style" include="demo-pages-shared-styles"></style>
29 </custom-style>
30 `;
31 document.body.appendChild(template.content);
32 </script>
33
34</head>
35<body unresolved>
36 <div class="centered">
37 <h4>Demo of a native element</h4>
38 <demo-snippet>
39 <template>
40 <input type="date">
41 </template>
42 </demo-snippet>
43
44 <h4>Demo of a native element with styles</h4>
45 <demo-snippet class="centered-demo">
46 <template>
47 <style>
48 .custom {
49 border: transparent;
50 border-bottom: 1px solid grey;
51 font-style: italic;
52 }
53 </style>
54 <input type="date" class="custom">
55 </template>
56 </demo-snippet>
57
58 <h4>Demo of a custom element with styles</h4>
59 <demo-snippet class="centered-demo">
60 <template>
61 <custom-style>
62 <style is="custom-style">
63 .styled {
64 --button-border: #e91e63;
65 --button-background: #e6ee9c;
66 color: #e91e63;
67 }
68 </style>
69 </custom-style>
70 <simple-button value="unstyled"></simple-button>
71 <simple-button value="styled" class="styled"></simple-button>
72 </template>
73 </demo-snippet>
74 </div>
75</body>
76</html>