Shadow DOMの練習
Scrapbox上で作れるか試してみる
練習その1
題材
test1.jscustomElements.define('progress-area', class extends HTMLElement {
connectedCallback() {
if (this.rendered) return;
this.render();
this.rendered = true;
}
render() {一度Element.attachShadow()で作成したあとは、Element.shadowRootで取得できる
test1.js const shadow = this.shadowRoot ?? this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
div {
position: fixed;
top: 0; right: 0;
margin: 1rem; padding: 1rem;
background: #FFF; color: 000;
z-index: 999999;
}
</style>
<div>
${this.getAttribute('message')}
</div>`;
}
get message() {
this.getAttribute('message');
}
set message(message) {
this.setAttribute('message', message);
}
static get observedAttributes() {
return ['message'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.getElementsByTagName('div')[0].textContent = newValue;
}
});
window.progressArea = document.createElement('progress-area');
document.body.appendChild(progressArea);14:46:34 できた
#2021-01-24 14:10:14
#2020-12-26 14:25:17