30 min • Online • No install required
For developers, PMs & tech leads
Prefer another tool over Zoom? Just say so when you book.
Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data with Zoom under its Privacy Policy.
This demo shows how yFiles for HTML can be used with Web Components.
Web Components are supported by all modern browsers.
The GraphComponent is wrapped in a custom element. It can be used by writing
<graph-component></graph-component>
in your HTML markup or by calling
document.createElement('graph-component')
in your JavaScript code.
The zoom property of the GraphComponent is reflected to an attribute of the custom element. Thus, the zoom level can be changed by simply setting the zoom attribute to a new value.
The GraphComponents canvas is inside the shadow root of the graph-component custom element, encapsulating it from outside influences like user-defined CSS styles.
Try changing this editable style element to see how it affects the svg rectangles underneath, where the right one is inside a shadow root while the left one is not:
You can also uncheck the 'Shadow Root' option in the toolbar to see how the user-defined CSS affects the graph visualization.