Optional single light-DOM element

The factory API is recommended. Register the thin declarative adapter explicitly only when an integration needs an element tag:

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

defineRelationGraphElement();

Then use it as follows:

<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>

Registration rules

defineRelationGraphElement('project-relation-graph');

The default tag is relation-graph.
Importing the package does not register a tag.
Registering the same tag with the same constructor is safe.
A tag already owned by another constructor produces an error.
Custom names must follow browser Custom Element naming rules.

Light DOM

The element has no shadowRoot. The runtime mounts .relation-graph directly inside it, so:

Page CSS can override styles normally.
Events bubble through regular DOM.
DOM queries and automation tools need no shadow traversal.
It does not restore the retired platform’s family of custom child elements.

Configure renderers, layers, plugins, and ui through element.config, not named slots or rg-* tags.

Lifecycle

Mounting starts when the element is connected and has config.
whenReady resolves to the current RGHtmlInstance.
Removing the element destroys its instance automatically.
Mutating an existing config object is not deeply reactive. Call instance APIs, or assign a new complete config and remount.

When not to use it

Prefer createRelationGraph() for ordinary pages, module applications, and routes that need explicit teardown. The element only provides a declarative main tag; it is not another platform or API surface.

Next: Lifecycle and migration.