53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import styles from '!raw-loader!sass-loader!./styles/app-service-header.scss';
|
|
|
|
class AppServieHeader extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
const root = this.attachShadow({ mode: 'open' });
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = styles;
|
|
root.appendChild(style);
|
|
|
|
const div = document.createElement('div');
|
|
div.className = 'header';
|
|
|
|
const info = document.createElement('div');
|
|
info.className = 'header_info';
|
|
|
|
const title = document.createElement('p');
|
|
title.className = 'header_info_title';
|
|
title.innerText = this.dataset.title;
|
|
info.appendChild(title);
|
|
|
|
const icon = document.createElement('img');
|
|
icon.className = 'header_info_icon';
|
|
icon.src = this.dataset.icon;
|
|
icon.alt = 'icon';
|
|
info.appendChild(icon);
|
|
|
|
const description = document.createElement('p');
|
|
description.className = 'header_description';
|
|
description.innerText = this.dataset.description;
|
|
div.appendChild(description);
|
|
|
|
div.appendChild(info);
|
|
|
|
root.appendChild(div);
|
|
|
|
const underDescription = document.createElement('p');
|
|
underDescription.className = 'header_underDescription';
|
|
underDescription.innerText = this.dataset.description;
|
|
root.appendChild(underDescription);
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['data-title', 'data-icon', 'data-description'];
|
|
}
|
|
}
|
|
|
|
customElements.define('app-service-header', AppServieHeader);
|