Last active
November 30, 2016 03:14
-
-
Save itsMattShull/7f48af802dd04e2d654560f7f44e451b to your computer and use it in GitHub Desktop.
Web Component without template.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | |
| <title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title> | |
| </head> | |
| <body> | |
| <aris-header> | |
| <h1 slot="h1">Hello World!</h1> | |
| <h2 slot="h2">subtitle</h2> | |
| </aris-header> | |
| <script src="https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script> | |
| <script src="https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script> | |
| <script src="https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js"></script> | |
| <script> | |
| (function() { | |
| 'use strict'; | |
| const supportsCustomElementsV1 = 'customElements' in window; | |
| const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow; | |
| class arisHeader extends HTMLElement { | |
| static get is() { return 'aris-header'; } | |
| static get templateId() { return `${this.is}-template`; } | |
| static get template() { | |
| if (!this._template) { | |
| this._template = ` | |
| <style> | |
| :host { | |
| display: block; | |
| position: relative; | |
| } | |
| section { | |
| background-color:#b82216; | |
| background-size:cover; | |
| padding:25px 15px; | |
| } | |
| .caret-right { | |
| width: 0; | |
| height: 0; | |
| display: none; | |
| vertical-align: middle; | |
| border-style: solid; | |
| border-width: 5px 0 5px 5px; | |
| border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); | |
| margin: 0px 5px; | |
| position: relative; | |
| top: -7px; | |
| } | |
| .caret-visible { | |
| display:inline-block; | |
| } | |
| #arisHeader ::slotted(h1) { | |
| color:white; | |
| margin:0; | |
| font-family: 'Dosis', sans-serif; | |
| font-weight: 200; | |
| font-size: 48px; | |
| display: inline-block; | |
| } | |
| #arisHeader ::slotted(h2) { | |
| color:white; | |
| margin:0; | |
| font-family: 'Dosis', sans-serif; | |
| font-weight: 200; | |
| font-size: 30px; | |
| display: inline-block; | |
| } | |
| </style> | |
| <section id="arisHeader"> | |
| <slot name="h1"></slot> | |
| <span class="caret-right"></span> | |
| <slot name="h2"></slot> | |
| </section> | |
| `; | |
| } | |
| return this._template; | |
| } | |
| constructor() { | |
| super(); | |
| if (!arisHeader.template) { | |
| throw Error(`Could not find template.`); | |
| } | |
| } | |
| connectedCallback() { | |
| const shadowRoot = this.attachShadow({mode: 'open'}); | |
| shadowRoot.innerHTML = arisHeader.template; | |
| //shadowRoot.innerHTML = arisHeader.template.cloneNode(true); | |
| //shadowRoot.appendChild(document.importNode(arisHeader.template.content, true)); | |
| // Shim styles, CSS custom props, etc. if native Shadow DOM isn't available. | |
| if (!supportsShadowDOMV1) { | |
| ShadyCSS.applyStyle(this); | |
| } | |
| if (this.innerHTML.indexOf("h2") != -1) { | |
| this.shadowRoot.querySelector('.caret-right').classList.add("caret-visible"); | |
| } | |
| } | |
| } | |
| ShadyCSS.prepareTemplate(arisHeader.template, arisHeader.is); | |
| window.customElements.define(arisHeader.is, arisHeader); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When I run this code I get
Cannot create property '_prepared' on stringfor line 115. Commenting out line 115, it works in Chrome, but doesn't style things correctly in Firefox and Safari.