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);
            }
        });