--- title: "ShadowDOM Widget Integration Tutorial" canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver" markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/examples/example-shadowdom-mutationobserver.md" last_updated: "2026-03-23T13:02:40Z" --- # ShadowDOM Widget Integration Tutorial ## Intended Audience This tutorial is for: - **Advanced frontend developers** working with Web Components and ShadowDOM - **Technical integrators** building encapsulated component architectures - Developers familiar with JavaScript DOM manipulation and the ShadowDOM API - Those who have completed basic [widget integration](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md) and need ShadowDOM support ## Goals By completing this tutorial, you will: - Understand how to integrate widgets inside ShadowDOM containers - Learn to pass DOM element references instead of CSS selectors - Implement a MutationObserver to clone widget styles into ShadowDOM - Create a complete, working ShadowDOM widget integration - Handle both open and closed ShadowDOM modes ## Prerequisites Before starting this tutorial, ensure you have: - **Valid Sportradar Widget license** - Contact [Sales](mailto:sales@betradar.com) if needed - **Client ID** - Provided with your license - **JavaScript knowledge** - Understanding of: - DOM manipulation - ShadowDOM API (`attachShadow`, shadow roots) - MutationObserver API - ES6+ syntax - **Basic widget integration experience** - Completed [Getting Started Guide](https://apidocs.sportradar.com/resources/widgets/docs/tutorials.md) - **Web development environment** - Text editor and modern browser with ShadowDOM support (Chrome, Firefox, Safari, or Edge) - **Match ID** - A valid match identifier for testing > **Info** > > ShadowDOM is supported in all modern browsers. Legacy browsers (IE11) do not support ShadowDOM and require polyfills. *** ## Overview ShadowDOM provides style and DOM encapsulation for web components, but this encapsulation presents two challenges for widget integration: 1. **CSS selectors don't work** - Widget container inside ShadowDOM cannot be targeted with standard selector strings, so direct DOM element must be passed instead 2. **Styles are isolated** - Widget styles injected into `` are not visible inside ShadowDOM, so they need to be cloned into the ShadowDOM. This tutorial shows you how to overcome both challenges. *** ## Tutorial Steps ### Step 1: Create ShadowDOM Container First, create a host element and attach a shadow root to it. Then create a container element inside the shadow root where the widget will be rendered. ```html ``` ```js {3-5} const host = document.getElementById('widget-host'); const shadowRoot = host.attachShadow({ mode: 'open' }); const widgetContainer = document.createElement('div'); shadowRoot.appendChild(widgetContainer); ``` > **Tip** > > Both `{ mode: 'open' }` and `{ mode: 'closed' }` work with this approach. The widget framework doesn't need access to the shadow root after initialization. ### Step 2: Pass DOM Element Reference to Widget API When working with ShadowDOM, you cannot use CSS selector strings with `SIR('addWidget')`. Instead, pass a direct reference to the container DOM element. > **Warning** > > ❌ **This will NOT work:** > > ```js > SIR('addWidget', '#widget-container', 'match.lmtPlus', { ... }); > ``` > > ✅ **This WILL work:** > > ```js > SIR('addWidget', widgetContainer, 'match.lmtPlus', { ... }); > ``` **Example initialization:** ```js {8} // Include widgetloader (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f, g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h) )})(window,document,"script","https://widgets.sir.sportradar.com/[CLIENT_ID]/widgetloader","SIR",{ theme: 'default', language: 'en' }); SIR('addWidget', widgetContainer, 'match.lmtPlus', { matchId: 'your_match_id_here' }); ``` > **Note** > > Replace `[CLIENT_ID]` with your actual client ID and `your_match_id_here` with a valid match identifier. ### Step 3: Set up Style Container Create a dedicated container inside the ShadowDOM to hold the cloned `` elements. ```js {2-3} const widgetContainer = document.createElement('div'); const linkContainer = document.createElement('div'); shadowRoot.appendChild(linkContainer); shadowRoot.appendChild(widgetContainer); ``` > **Info** > > The `linkContainer` should be added before the `widgetContainer` to ensure styles are loaded in the correct order. ### Step 4: Implement MutationObserver for Style Cloning Widgets inject `` and `