可选的单一 light-DOM 元素

工厂 API 是推荐方式。如果业务系统需要声明式标签，可以显式注册 HTML 平台提供的薄适配元素：

import {
  defineRelationGraphElement
} from '@relation-graph/html';

defineRelationGraphElement();

随后使用：

<relation-graph id="graph" style="display:block;width:100%;height:600px"></relation-graph>

<script type="module">
  const element = document.querySelector('#graph');

  element.config = {
    options: {layout: {layoutName: 'center'}},
    data: {
      nodes: [{id: 'a', text: 'A'}, {id: 'b', text: 'B'}],
      lines: [{id: 'a-b', from: 'a', to: 'b'}]
    }
  };

  const graph = await element.whenReady;
  graph.zoomToFit();
</script>

注册规则

defineRelationGraphElement('project-relation-graph');

• 默认标签名是 relation-graph。
• 包导入时不会自动注册标签。
• 重复使用相同构造器注册同一个标签是安全的。
• 标签名已经被其他构造器占用时会抛出错误。
• 自定义标签名必须满足浏览器 Custom Element 命名规则。

Light DOM

此元素没有 shadowRoot。运行时把 .relation-graph DOM 直接挂载在元素内部，因此：

• 页面 CSS 可以正常覆盖样式。
• 事件可以沿普通 DOM 冒泡。
• DOM 查询和自动化工具无需穿透 Shadow Root。
• 它不会重新引入旧平台的多个自定义子元素。

Renderer、Layer、Plugin 和 ui 仍通过 element.config 配置，不通过命名插槽或 rg-* 标签配置。

生命周期

• 元素连接到文档且获得 config 后开始挂载。
• whenReady 返回当前 RGHtmlInstance。
• 从文档移除元素时会自动销毁实例。
• 修改已有 config 对象不会自动产生深度响应式更新；调用实例 API，或者赋一个新的完整 config 并重新挂载。

何时不使用

普通页面、模块化应用和需要明确销毁时机的路由，优先直接调用 createRelationGraph()。Custom Element 只解决“需要一个声明式主标签”的集成需求，并不是另一个平台或另一套 API。

下一页：生命周期与迁移。