Box
基本上不是作為排版的元件，但具有背景、邊框等。
source code
// 0.0.9 - Box: remove render(), use setters instead.
import {attr} from './helpers.mjs';
/**
* Box
* ---
* <box- padding="" border="" background="" color="" dark>
*/
export default class Box extends HTMLElement {
// ⭐ observed attributes
static get observedAttributes() {
return [
'padding', 'border', 'color', 'background', 'dark'
];
}
// re-renders whenever one of attributes changes.
attributeChangedCallback(attr, oldValue, newValue) {
// ⭐️ 更新：全部透過 setter 處理就好。
this[attr] = this[attr];
}
// -------------- ⭐️ getters/setters ------------------
// this.padding
get padding() { return attr(this, 'padding') }
set padding(val) {
this.style.padding = val;
return attr(this, 'padding', val)
}
// this.border
get border() { return attr(this, 'border') }
set border(val) {
this.style.border = val;
return attr(this, 'border', val)
}
// this.color
get color() { return attr(this, 'color') }
set color(val) {
this.style.color = val;
return attr(this, 'color', val)
}
// this.background
get background() { return attr(this, 'background') }
set background(val) {
this.style.background = val;
return attr(this, 'background', val)
}
// this.dark
get dark() { return this.hasAttribute('dark') }
set dark(val) {
this.classList.toggle('dark', val);
return attr(this, 'dark', val);
}
}
// ⭐️ register <box->
customElements.get('box-') ||
customElements.define('box-', Box);Last updated