<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.5.0/document-register-element.js">
/* W3C Custom Elements */
</script>
<script src="script.js"></script>
<style>
app-drawer {
display: block;
background-color: #ccc;
}
app-drawer[open] {
width: 400px;
}
app-drawer:not([open]) {
width: 100px;
}
</style>
</head>
<body>
<script>
class AppDrawer extends HTMLElement {
// A getter/setter for an open property.
get open() {
return this.hasAttribute('open');
}
set open(val) {
// Reflect the value of the open property as an HTML attribute.
if (val) {
this.setAttribute('open', '');
} else {
this.removeAttribute('open');
}
// this.toggleDrawer();
}
// A getter/setter for a disabled property.
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(val) {
// Reflect the value of the disabled property as an HTML attribute.
if (val) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
// Can define constructor arguments if you wish.
constructor() {
// If you define a ctor, always call super() first!
// This is specific to CE and required by the spec.
super();
// Setup a click listener on <app-drawer> itself.
this.addEventListener('click', e => {
// Don't toggle the drawer if it's disabled.
if (this.disabled) {
return;
}
this.toggleDrawer();
});
}
toggleDrawer() {
this.open = !this.open;
}
}
customElements.define('app-drawer', AppDrawer);
</script>
<h1>custom element <app-drawer></h1>
<app-drawer> click here </app-drawer>
</body>
</html>
// Code goes here
/* Styles go here */