shadow DOM

基本概念

Shadow DOM 是指，浏览器可以渲染一系列 DOM 元素，而不必把它们插入到主文档的 DOM 树结构中。

实际应用

• 全局页面水印生成

const { styleStr } = createWatermark({
    content: [`${"内部资料，严禁外传，外传必究"}`],
    font: {
      color: "rgba(0,0,0,.15)",
      fontSize: 14
    }
  });

  const body = document.body;
  const div = document.createElement("div");
  div.id = "outside";
  body.appendChild(div);

  const outside = document.getElementById("outside");
  // 创建shadow
  const shadowRoot = outside.attachShadow({ mode: "open" });
  // 插入
  shadowRoot.innerHTML = `
    
    

  `;

页面效果：