Question

6

Shadow DOM and ReactJS

rated 0 times [ 11] [ 5] / answers: 1 / hits: 24107 / 7 Years ago, thu, february 16, 2017, 12:00:00

I am using web components in my application. And in a web component, I need to insert a react component. Web Component has Shadow DOM. When I try to render the react component using following I get the error.

comp = React.createElement(ReactElem, {

    config: config,

    onRender: handleRender

});



ReactDOM.render(comp , self.shadowRoot.querySelector('#app1'));

Error

target container is not a dom element

I tried to use content of Web component API but then it gets rendered on top rather inside component. Any leads how can make React component to get rendered inside shadow DOM?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elishaannac

Add To Favorites

Follow

Total Points: 28

Total Questions: 97

Total Answers: 101

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

elishaannac questions

1 Getting warning in 'eslint-plugin-react-settings' while running eslint

Fri, Mar 11, 22, 00:00, 2 Years ago

1 React-router-dom (v6) with Framer Motion (v4)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 can I display custom javascript in streamlit web app

Mon, Jun 14, 21, 00:00, 3 Years ago

1 Handling state with multiple checkboxes in React Native

Mon, Jul 22, 19, 00:00, 5 Years ago

1 How to add custom row on the end of the table (b-table)

Mon, Jul 8, 19, 00:00, 5 Years ago

View All

answered 7 Years ago hugo · Accepted Answer

If you want to insert it inside the shadow DOM of a web component, first select the component (e.g. with querySelector) and then its containing shadow (shadowRoot). Simplified example:

// Create React Element.

class Example extends React.Component {

  onClick() {

    console.log('Shadow!')

  }

  render() {

    return(

      <div onClick={this.onClick}>Hello World!</div>

    );

  }

}



// Create web component with target div inside it.

const container = document.createElement('app');

document.body.appendChild(container);



// Add shadow root to component.

const shadow = document.querySelector('app').attachShadow({ mode: 'open' });



// Select the web component, then the shadowRoot.

const target = document.querySelector('app').shadowRoot;



ReactDOM.render(<Example />, target);

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>