Skip to content

Instantly share code, notes, and snippets.

@kevinpschaaf

kevinpschaaf/index.html

Created May 4, 2018 19:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinpschaaf/8a5acbea7b25d2bb5e82eeea2b105669 to your computer and use it in GitHub Desktop.
Save kevinpschaaf/8a5acbea7b25d2bb5e82eeea2b105669 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer 3.0 example
Raw
index.html
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
</head>
<body>
<!-- Loads natively on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 16. For all others, use a
module-compatible toolchain like Polymer CLI, WebPack, or Rollup -->
<script type="module">
import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
class MyElement extends PolymerElement {
static get properties() { return { mood: String }}
static get template() {
return html`
<style> .mood { color: green; } </style>
Web Components are <span class="mood">[[mood]]</span>!
`;
}
}
customElements.define('my-element', MyElement);
</script>
<my-element mood="awesome"></my-element>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment