1 | <!doctype html>
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
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>
|