TechDocsShadowDom()
Home > @backstage/plugin-techdocs-react
> TechDocsShadowDom
Renders a tree of elements in a Shadow DOM.
Signature:
TechDocsShadowDom: (props: TechDocsShadowDomProps) => React.JSX.Element
Parameters
Parameter |
Type |
Description |
---|---|---|
props |
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} />;
};