|
4 | 4 | <title>pmp-simple-date-input demo</title> |
5 | 5 | <meta charset="utf-8"> |
6 | 6 | <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
7 | | - <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 7 | + <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script> |
8 | 8 |
|
9 | | - <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> |
10 | | - <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> |
| 9 | + <script type="module" src="../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script> |
| 10 | + <script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script> |
11 | 11 |
|
12 | | - <link rel="import" href="../pmp-simple-date-input.html"> |
| 12 | + <script type="module" src="../pmp-simple-date-input.js"></script> |
13 | 13 |
|
14 | | - <style is="custom-style" include="demo-pages-shared-styles"> |
15 | | - </style> |
| 14 | + <!-- FIXME(polymer-modulizer): |
| 15 | + These imperative modules that innerHTML your HTML are |
| 16 | + a hacky way to be sure that any mixins in included style |
| 17 | + modules are ready before any elements that reference them are |
| 18 | + instantiated, otherwise the CSS @apply mixin polyfill won't be |
| 19 | + able to expand the underlying CSS custom properties. |
| 20 | + See: https://github.com/Polymer/polymer-modulizer/issues/154 |
| 21 | + --> |
| 22 | + <script type="module"> |
| 23 | +const $_documentContainer = document.createElement('template'); |
| 24 | + |
| 25 | +$_documentContainer.innerHTML = `<style is="custom-style" include="demo-pages-shared-styles"> |
| 26 | + </style>`; |
| 27 | + |
| 28 | +document.head.appendChild($_documentContainer.content); |
| 29 | +</script> |
16 | 30 | </head> |
17 | 31 | <body> |
18 | 32 |
|
19 | | - <div class="vertical-section-container centered"> |
| 33 | + <script type="module"> |
| 34 | +const $_documentContainer = document.createElement('template'); |
| 35 | + |
| 36 | +$_documentContainer.innerHTML = `<div class="vertical-section-container centered"> |
20 | 37 | <h3>Basic pmp-simple-date-input Demo</h3> |
21 | 38 | <demo-snippet> |
22 | 39 | <template> |
23 | 40 | |
24 | | - <pmp-simple-date-input auto-validate required></pmp-simple-date-input> |
| 41 | + <pmp-simple-date-input auto-validate="" required=""></pmp-simple-date-input> |
25 | 42 | </template> |
26 | 43 | </demo-snippet> |
27 | | - </div> |
| 44 | + </div>`; |
| 45 | + |
| 46 | +document.body.appendChild($_documentContainer.content); |
| 47 | +</script> |
28 | 48 |
|
29 | 49 | </body> |
30 | 50 | </html> |
0 commit comments