@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
61 lines (52 loc) • 1.2 kB
HTML
<html>
<head>
<link rel="import" href="../../polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
}
.parent {
border: 1px solid red;
justify-content: space-between;
width: 300px;
display: flex;
}
.child {
border: 1px solid green;
width: 100px;
}
</style>
<div class='parent'>
<div class='child'>Child1</div>
<template is='dom-if' if='1'>
<div class='child'>Child2</div>
</template>
</div>
</template>
<!-- Uncomment for class syntax -->
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
prop: {
type: String
}
}
}
constructor() {
super();
this.prop = 'my-element'
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
<my-element></my-element>
</body>
</html>