그림자 DOM 및 ReactJS

Question

내 응용 프로그램에서 웹 구성 요소를 사용하고 있습니다. 그리고 웹 구성 요소에서 반응 구성 요소를 삽입해야합니다. 웹 구성 요소에 그림자 DOM이 있습니다. 다음을 사용하여 반응 구성 요소를 렌더링하려고하면 오류가 발생합니다.

comp = React.createElement(ReactElem, { 
    config: config, 
    onRender: handleRender 
}); 

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

오류

target container is not a dom element 

나는 웹 구성 요소의 API의 content을 사용하려고하지만 그것은 오히려 구성 요소의 내부 상단에 렌더링됩니다. React 구성 요소를 그림자 DOM 내부에서 렌더링하도록 만드는 방법은 무엇입니까?

Answer 1

웹 구성 요소의 그림자 DOM 안에 삽입하려면 먼저 구성 요소 (예 : querySelector)를 포함하고 그림자가 포함 된 부분 (shadowRoot)을 선택합니다. 간단한 예 :

// 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').createShadowRoot({ 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>