So I am working on a website. I have included a twitter timeline in the HTML you can check how it is done here. I have inspected the widgets elements in the developer options, and it seems like an iframe element containing another html document inside my div(.cust-twitter-div) element from what I know.

The problem is that I would like to further style the elements inside the widget and have tried the following solutions which have not seems to work.

1. Using the default class name of the elements in a stylesheet using !important in each style. The only CSS selector that seem to work is the one below (note the iframe is included in the selector and cust-twitter-div is my div enclosing the widget):

.cust-twitter-div iframe {
   width: 90% !important;
   max-width: 600px !important;
   box-shadow: 00px 0px 10px #ffbc50b6;
}

2. (The most puzzling one as to why it's not working) Selecting (again using their default class names) the elements using JS and adding the styles.

    document.onreadystatechange = function () {
      if (document.readyState == "complete") {
        console.log("DOM fully loaded and parsed");
        let cust_twitterElement = document.querySelector('.timeline-Body');
        console.log(cust_twitterElement);
      }
    }

Now, the puzzling thing about the second solution is that it returns null for the element I have selected. When I tried selecting the iframe it returned some sort of JS object/HTML element. Though in the inspector, it shows the iframe element has children, I cannot select them using JS as the returned object shows firstChild as null and children length as 0. As below:

I ultimately concluded the iframe is the only element I could interact with in code both JS and CSS, but not the children the inspector shows it to be containing.

So what am I doing wrong? How can I get to style the elements inside the widget?