开发工具

Web Component Lab

在 iframe 沙箱中编写 Web Component 自定义元素，实时预览并查看 Shadow DOM 结构。

沙箱隔离运行

运行方式: 沙箱隔离运行
标签: web-componentcustom-elementshadow-domsandbox
工具标识: web-component-lab
Worker: 无需启用
权限: 剪贴板

使用步骤

按页面字段输入、粘贴或导入需要处理的内容。
根据场景调整参数，查看实时预览、统计、提示或生成结果。
复制、导出或记录结果，并在真实环境中复核关键配置。

使用例子

使用Web Component Lab处理一次日常工作流。
把生成结果复制到文档、工单、配置或测试数据中继续使用。

组件定义

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: "open" });
  }
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: inline-block; padding: 16px; border: 2px solid #6366f1; border-radius: 12px; text-align: center; font-family: system-ui; }
        button { padding: 8px 16px; margin: 0 4px; border: none; border-radius: 6px; cursor: pointer; }
        .value { font-size: 2rem; font-weight: bold; color: #6366f1; margin: 8px 0; }
      </style>
      <slot name="title">Counter</slot>
      <div class="value" id="value">0</div>
      <button id="dec">-</button>
      <button id="inc">+</button>
    `;
    this.shadowRoot.getElementById("inc").onclick = () => this.update(++this.count);
    this.shadowRoot.getElementById("dec").onclick = () => this.update(--this.count);
  }
  update(val) {
    this.shadowRoot.getElementById("value").textContent = val;
  }
}
customElements.define("my-counter", MyCounter);

使用 HTML

<my-counter>
  <span slot="title">Count: </span>
</my-counter>

在隔离沙箱中注册 Web Component 自定义元素；Shadow DOM 提供样式封装。

Web Component Lab

开始使用

使用步骤

使用例子

Web Component Lab

Web Component Lab

Web Component Lab