方法

2023年08月15日

柏拉文

越努力，越幸运

一、element.attachShadow()

---

element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM，并且返回对 ShadowRoot 的引用。

1.1 语法

const shadowroot = element.attachShadow(shadowRootInit);

• shadowRootInit: 一个 ShadowRootInit 字典，包括下列字段:

  • mode 模式: 指定 Shadow DOM 树封装模式的字符串，可以是以下值:

    • open: shadow root 元素可以从 js 外部访问根节点

    • closed: 拒绝从 js 外部访问关闭的 shadow root 节点

  • delegatesFocus: 一个布尔值，当设置为 true 时，指定减轻自定义元素的聚焦性能问题行为。 当 shadow DOM 中不可聚焦的部分被点击时，让第一个可聚焦的部分成为焦点，并且 shadow host（影子主机）将提供所有可用的 :focus 样式。

• shadowroot: 是一个 DOM 子树的根节点，它与文档的主 DOM 树分开渲染

1.2 用法

附加到内置元素

const app = document.querySelector('#app');
const shadowDom = app.attachShadow({ mode: 'open'});

const div1 = document.createElement('div');
div1.innerHTML = 'shadowDom 元素内容'
shadowDom.appendChild(div1);

附加到自定义元素

<custom-element id="3" url="http"></custom-element>

<script>
    class CustomElement extends HTMLElement{
    constructor(){
        super();

        const shadow = this.attachShadow({ mode: "open" });
        const wrapper = document.createElement('div');
        wrapper.innerHTML = "自主定制元素"

        console.log(this.getAttribute('id'));
        console.log(this.hasAttribute('url'))

        shadow.appendChild(wrapper);
    }
    }

    customElements.define('custom-element',CustomElement);
</script>