js创建自定义dom对象并设置只读(html可以看js无法访问)
// 创建一个自定义元素 MyReadOnlyTitle
customElements.define('my-read-only-title', class extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadowRoot = this.attachShadow({mode: 'open'});
// 创建一个 <h1> 元素作为标题
const h1 = document.createElement('h1');
h1.textContent = this.textContent;
// 将 <h1> 元素添加到 Shadow DOM 中
shadowRoot.appendChild(h1);
// 禁止通过 JavaScript 修改内容
Object.defineProperty(this, 'textContent', {
get() {
return '';
},
set() {
// 禁止设置内容
console.warn('Setting textContent on a MyReadOnlyTitle element has no effect.');
}
});
}
});
// 创建一个自定义元素 MyCustomTag
customElements.define('my-custom-tag', class extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadowRoot = this.attachShadow({mode: 'closed'});
// 创建一个 <span> 元素作为内容的容器
const content = document.createElement('span');
content.textContent = this.textContent;
// 将内容添加到 Shadow DOM 中
shadowRoot.appendChild(content);
}
});
