I was simply figuring out how to style the embedded Tweets on my web application and realized Twitter’s embedded Tweet display had switched from using <iframe> to shadow DOM. Also, the styling I wanted to apply could not be done by changing embedded tweet parameters. So I played with shadow DOM and finally removed the border line of the tweet widget to let it blend in with the web page. Here is a guide to help you to do the same with your embedded tweets!
Before we start working on the codes, here’s some important ideas I learned about shadow DOM.
- Style Encapsulation: The shadow boundary encapsulates the CSS styles defined inside shadow DOM for free, so the style rules don’t leak out. No more need for components’ author to collaborate in order for styles to be encapsulated. Other CSS rules defined on the page won’t bleed into the shadow DOM either.
- Isolated DOM: Since a component’s DOM is self-contained, we can think of this app as having different pieces like that of a puzzle that make up chunks of DOM! This is great for building component-based apps.
Why Twitter made the change?
Tweets display at a faster rate. In their announcement, they mentioned the change utilizes less browser memory which makes the rendering time faster.
One question leads to another. Why does Shadow DOM render faster than iframes?
- Shadow DOM is basically an isolated DOM tree that gets attached to the original document. However, an embedded content created by
<iframe>is a complete document environment that will be embedded inside<body>of your page. That means that the use of<iframe>needs a greater amount of memory as well as other computing resources required by the document. - A shadow DOM’s styles don’t need to look at the rest of the page’s styles, so they can be computed much quickly.
Ok, we got the concepts. Let’s get the work done.
Goal: Remove the border line of this embedded tweet on my webpage.
Open your developer tool in Chrome, you will see the shadow DOM inserted under twitterwidget element.
Mode open allows us to access the shadow DOM using JavaScript written in the main page context.
To create a embedded Tweet and let it generated at runtime, we have to use the factory function twttr.widgets.createTweet from widgets-js (Js interfaces for Twitter for websites)
The third argument in this function provides us a few options to change the style of the widget. For example, theme can be light or dark, With the options, I was able to toggle the color scheme of the embedded Tweet but I wanted to modify more style rules in it.
If you want to look for the Tweet’s class name and simply add style rules under the same class name on your stylesheet, it won’t work. Remember, CSS rules defined on the page don’t bleed into the shadow DOM.
Let’s find the root node of the shadow tree in order to apply whatever styles we would like for the embedded Tweets. We can make changes to the nodes in the shadow DOM in exactly the same way as non-shadow nodes. The concept of encapsulation is that none of the code inside shadow DOM can affect the elements outside of it.
The createTweet function returns a Promise. We can only style the element after the widget has been created. Once we have the widget element, we use the property .shadowRoot to get the shadow root hosted by the element. Now, you can simply use jQuery API to find the children elements and apply whatever styles you would like to see!
Hope you find this article helpful. Happy coding!