84 lines
1.7 KiB
JavaScript
84 lines
1.7 KiB
JavaScript
class MainWindow extends HTMLElement {
|
|
static observedAttributes = ['title', 'description'];
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
console.log('Component constructed', this);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
console.log('Component disconnected', this);
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const title = this.getAttribute('title') || "No title";
|
|
const description = this.getAttribute('description') || "No description";
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
div {
|
|
width: 900px;
|
|
height: 577px;
|
|
background: #FFFFFF 0% 0% no-repeat padding-box;
|
|
box-shadow: 0px 5px 12px #0000001F;
|
|
border-radius: 20px;
|
|
opacity: 1;
|
|
}
|
|
|
|
span {
|
|
width: 800px;
|
|
margin: 0 50px 13px 50px;
|
|
}
|
|
|
|
h1 {
|
|
top: 221px;
|
|
margin: 50px 50px 13px 50px;
|
|
height: 49px;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
p {
|
|
margin: 0 50px 0 50px;
|
|
text-align: center;
|
|
height: 74px;
|
|
|
|
/* UI Properties */
|
|
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
opacity: 1;
|
|
}
|
|
slot {
|
|
margin: 0 50px 0 50px;
|
|
}
|
|
</style>
|
|
<div>
|
|
<h1>${title}</h1>
|
|
<p>${description}</p>
|
|
<span><slot></slot></span>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('main-window', MainWindow);
|
|
|