The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.
You can retrieve a reference to an element by defining the elemet below sui:shadow-root tag in the same way as for the non shadow root elements.

Usage

<sui:page id=""! schema="html">
	<sui:shadow-root >
		<div id=""! remoteId=""?>
   		<button id=""! attribute:xx=""? text=""? method=""? />
    	<element id=""! type=""? xPath=""? attribute:xx=""? method=""? />
		<ul id=""? attribute:xx=""? method=""?>
       		<li id=""! attribute:xx=""? text=""? method=""? index=""? sibling=""? directChild=""? />
    	</ul>
	</sui:shadow-root>
</sui:page>

! - mandatory, ? - optional

Example

HTML

CAST Page Object

CAST Testing Platform - User Guide > UI Shadow Root (sui:shadow-root) > image2022-3-3_12-4-53.png

    <div remoteId="shadowDomComponent">

        <h1 id="shadowDomComponentHeader" directChild="true"/>

        <sui:shadow-root type="app-shadow-dom">
            <button remoteId="shadowRootShowButton" id="shadowRootShowButton"/>
            <button remoteId="shadowRootHideButton" id="shadowRootHideButton"/>
            <div remoteId="petImageContainer">
                <img id="shadowImage"/>
            </div>
        </sui:shadow-root>

    </div>