54 lines
1.1 KiB
JavaScript
54 lines
1.1 KiB
JavaScript
class MyComponent extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.popup-text {
|
|
visibility: hidden;
|
|
width: 160px;
|
|
background-color: #555;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 8px 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
:host(.show) .popup-text {
|
|
visibility: visible;
|
|
animation: fadeIn 1s;
|
|
}
|
|
@keyframes fadeIn {
|
|
from {opacity: 0;}
|
|
to {opacity:1 ;}
|
|
}
|
|
</style>
|
|
<span class="popup-text">
|
|
Tole je testni popup
|
|
<slot></slot>
|
|
</span>
|
|
`
|
|
}
|
|
|
|
toggle() {
|
|
this.classList.toggle('show')
|
|
}
|
|
|
|
changeText(text) {
|
|
this.shadowRoot.querySelector('.popup-text').textContent = text
|
|
}
|
|
}
|
|
|
|
customElements.define('my-component', MyComponent)
|