addComponentStructureInfo
This function will add the name of the corresponding component factory or brick into the DOM as comment node.
This facilitates the mental matching between the Kotlin factory or brick name and its created HTML element in the DOM. The comment is rendered as direct predecessor of its corresponding DOM element in most cases. If the brick or factory results in a tag that is rendered based on a Flow, the comment will appear as first child node of the created element.
Example:
div(scope = { set(SHOW_COMPONENT_STRUCTURE, true) }) {
switch("...") {
value(switchState)
}
}
// out of scope -> structural information will not get rendered
switch("...") {
value(switchState)
}
Content copied to clipboard
Will result in the following DOM:
<div>
<!-- switch -->
<button aria-checked="false" ...></button>
</div>
<button aria-checked="false" ...></button>
Content copied to clipboard