Break On Element Demonstration

This custom element is a declarative debugger for element modifications.

You will need to open up your browser’s developer tools for it to work initially.

This doesn’t provide sufficient options for it to be observed.

Breaking on attribute modifications: Add ID Add Class

Breaking on class attribute modifications: Add ID Add Class

Breaking on class and ID attribute modifications: Add ID Add Class Add Custom Property

Breaking on attribute modifications including in the subtree. Add ID Add Class Add Custom Property to Subtree element

Break on children added or removed.

Break on children added or removed in a subtree.

Setting the breakpoint on a nested element Add Class

Breaks on text changes to the first top-level text node.

Breaks on text changes to all text nodes in the subtree.