@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
101 lines (84 loc) • 2.31 kB
HTML
<html>
<head>
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../lib/mixins/disable-upgrade-mixin.html">
</head>
<body>
<script>
(function() {
const ogDefine = window.customElements.ogDefine = window.customElements.define;
window.customElements.defineWithDisabled = function(name, constructor) {
return ogDefine.call(customElements, name,
Polymer.DisableUpgradeMixin(constructor));
}
window.customElements.define = window.customElements.defineWithDisabled;
})();
</script>
<dom-module id="x-disabled">
<template>
<style>
:host {
display: block;
}
h2 {
letter-spacing: 1em;
}
</style>
<h2>[[prop]]</h2>
</template>
<script>
class Disabled extends Polymer.Element {
static get is() { return 'x-disabled'; }
static get properties() {
return {
prop: {
type: String
}
}
}
constructor() {
super();
this.prop = 'enabled!';
}
};
customElements.define(Disabled.is, Disabled);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
}
button {
display: block;
}
</style>
<h3>x-disabled without disable-upgrade</h3>
<x-disabled>Disabled</x-disabled>
<h3>x-disabled with disable-upgrade</h3>
<x-disabled id="disabled" disable-upgrade>Disabled</x-disabled>
<h3>x-disabled with disable-upgrade</h3>
<x-disabled disable-upgrade$="[[upgradeDisabled]]">Disabled</x-disabled>
<button on-click="_enable">Enable</button>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
upgradeDisabled: {value: true}
}
}
_enable() {
this.$.disabled.removeAttribute('disable-upgrade');
this.upgradeDisabled = false;
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
<my-element></my-element>
</body>
</html>