TechDocsShadowDom

Home > @backstage/plugin-techdocs-react > TechDocsShadowDom

Renders a tree of elements in a Shadow DOM.

Signature:

TechDocsShadowDom: (props: TechDocsShadowDomProps) => React.JSX.Element

Remarks

Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times, so if you want to know when Shadow DOM styles are computed, you can listen for the "TECH_DOCS_SHADOW_DOM_STYLE_LOAD" event dispatched by the element tree.

Example

Here is an example using this component and also listening for styles loaded event:

import {
  TechDocsShadowDom,
  SHADOW_DOM_STYLE_LOAD_EVENT,
} from '@backstage/plugin-techdocs-react';

export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {
  // ...
  const dom = useTechDocsReaderDom(entity);

  useEffect(() => {
    const updateSidebarPosition = () => {
      // ...
    };
    dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
    return () => {
      dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
    };
  }, [dom]);

  const handleDomAppend = useCallback(
    (newShadowRoot: ShadowRoot) => {
      setShadowRoot(newShadowRoot);
    },
    [setShadowRoot],
  );

  return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
};