Scoped CSS

By default, when you insert a style tag in the SVG, this style affects the entire page. Consequently, collisions and side effects may occur if the selectors used to match other elements.

On the other hand, the styles defined in the page affect all SVG inserted in the page. In this case, it can be useful to keep a coherent style between graphs, by can be complex to manage.

CSS define into the template

You can define a <style> directly in the template or into the <svg> into the template, it will be used only inside the component and will avoid collision with other styles and components. Graphane component moves the template into its Shandow DOM and applies the style internally.

This is a scoped CSS: