Should you want to add content to the widget (or indeed any of our UI components), since we use a Shadow DOM to ensure encapsulation of styling, you should first access the shadowRoot
property of the host element - from there you can access the elements and manipulate them or append new ones.
For example, if you want to target the Dynamic Widget, you’d look for an element with data-testid="dynamic-modal-shadow"
:
From there you’ll need to pick the element that is the shadowRoot:
As a best practice, you can encapsulate your manipulation logic in a function, then call that function immediately but also add it to a mutation observer.
The observer is important for multiple reasons:
Now you have access to the modal, you can target whatever element you want to adjust, or append new elements at will.
Should you want to add content to the widget (or indeed any of our UI components), since we use a Shadow DOM to ensure encapsulation of styling, you should first access the shadowRoot
property of the host element - from there you can access the elements and manipulate them or append new ones.
For example, if you want to target the Dynamic Widget, you’d look for an element with data-testid="dynamic-modal-shadow"
:
From there you’ll need to pick the element that is the shadowRoot:
As a best practice, you can encapsulate your manipulation logic in a function, then call that function immediately but also add it to a mutation observer.
The observer is important for multiple reasons:
Now you have access to the modal, you can target whatever element you want to adjust, or append new elements at will.