shadow dom에 대해서 (feat. react-twitter-embed)

react-twitter-embed을 사용하다가 dom에 접근해서 A tag에 onclick을 overwrite하고 싶은데 shadow dom에 쌓여있어서 접근방법을 못찾고 있었다.

 

그러다가 stories(시나리오 정도?)에서 검색하니 react-twitter-embed에서 shadow dom을 제공하는 부분이 있어서 기록에 남긴다.

      <div className='centerContent'>
        <div className='selfCenter'>
          <TwitterTweetEmbed
            tweetId={'1083592734038929408'}
            options={{ cards: 'hidden', width: 300, maxWidth: 800 }}
            onLoad={tweetWidgetEl => {
              const tweetEl = tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet')
              tweetEl.style.width = '800px'
              tweetEl.style.maxWidth = '800px'
            }}
          />
        </div>
      </div>

위 코드에서 보듯 onLoad에서 shadow Root을 받아올 수 있다.

Reference

 

 

나중에 shadow dom으로 개발하게 된다면 이 라이브러리처럼 onLoad을 통해 shadowRoot에 접근할 수 있도록 callback을 열어놓는게 좋겠다.