DataGrid for DevExtreme - Shadow DOM Support

Shadow DOM represents one of three Web Components specifications, complemented by HTML templates and Custom Elements. Shadow DOM allows you to attach a DOM subtree to an element and hide the internals of this tree from JavaScript and CSS running on the page. Shadow DOM is instrumental in building scalable, conflict-free web applications (making developing complex, component-based web interfaces easier).

This example sets up a Shadow DOM host and adds a DevExtreme DataGrid component to it. You can use similar code with other components.

To attach a Shadow DOM tree, follow the instructions for each framework:

• Angular

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      // ...
      encapsulation: ViewEncapsulation.ShadowDom,
  })
  export class AppComponent {
      // ...
  }
  

• Vue

  const app = createApp(App);
  const shadowHost = document.getElementById("app") as HTMLElement;
  const shadowRoot = shadowHost.attachShadow({ mode: "open" }) as any;
  
  app.mount(shadowRoot);
  

• React

  const shadowHost = document.getElementById('root') as HTMLElement;
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  const root = ReactDOM.createRoot(shadowRoot);
  
  root.render(
      <React.StrictMode>
          <App />
      </React.StrictMode>,
  );
  

Files to Review

• Angular
  • app.component.html
  • app.component.ts
• Vue
  • Home.vue
• React
  • App.tsx

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)