0

I'd like to preface this with I am very new to JS and HTML so if this is an ignorant question or my terminology is terrible, I apologize. Also this is my first time posting on StackOverflow, so I'm hoping that I'm using their code embedding correctly, elsewise this post may be frightening to look at.

I have a Tableau Viz that I am embedding into a **Wix **website. It embeds properly, but I would like to drill down from into a #shadow-root into #document to update a CSS attribute and make the viz background transparent.

The element for the CSS attribute is:

<div id="dashboard-spacer" class="dashboardSpacer tab-widget" role="application" style="width: 1000px; height: 573px; background-color: rgb(255, 255, 255); visibility: visible; margin: auto;">

Which is contained within #document Which is contained within #shadow-root (some attributes removed as it is very large)

<iframe title="Data Visualization" allowtransparency="true" allowfullscreen="true" id="tableau-viz" name="tableau-viz" src="sensitive_info_pointing_to_my_dashboard"></iframe>

Which is within (this is the only HTML part that I actually add manually. The rest is all a result of the src in tableau-viz) And I would like to update background-color to transparent

I've been able to access/log the shadow-root with jQuery with:

    $(document).ready(function() {
      let testvar = document.querySelector('#tableau-viz').shadowRoot;
      console.log(testvar)
          });

Which only logs the iframe element, not the document attached (no idea if this is the expected result) but haven't gotten much further than that. I tried the following from what little I know about JS, but my guess is this is buggy nonsense:

      let spacer = document.querySelector('#tableau-viz').shadowRoot.querySelector('#dashboard-spacer');
      spacer.attr("background-color", 'transparent')

(This also may all just violate cross-origin policies, as the website is wix and the iframes are tableau?)

Thanks everyone! It'll be super cool if we can figure this out!

Panda_panda
  • 1
  • 1
  • Does this answer your question? [Using CSS to affect div style inside iframe](https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – disinfor Apr 14 '23 at 20:55
  • Thank you for the comment! As a non-JS/HTML person, I was getting stuck on the additional levels of shadow dom plus iframe plus html doc. It appears my situation violates cross-origin policies, hence I am unable to access the HTML doc inside the iframe. And as I do not have access to the iframe source, there's nothing that can be done. Thank you though! – Panda_panda Apr 25 '23 at 16:19

0 Answers0