V3 Embeds Throw Error
When applying TabScale to an embed using Tableau's v3 embedding API the new web component results in an error:
ReferenceError: The DOM element where you are embedding your visualization must contain EXACTLY one iframe element.
This occurs when passing the web component (the new viz object) to TabScale such as: const tabScale = new TabScale.Scale(viz);
and then initializing TabScale.
The child iframe is accessible via the "shadowRoot": viz.shadowRoot.querySelector('iframe')
however, "shadowRoot" does not seem to support getElementsByTagName()
used in TabScale which throws an error:
TypeError: viz.shadowRoot.getElementsByTagName is not a function
To reproduce this error you can clone this sample react embed: https://github.com/Tab-SE/embedding_playbook
Under the view.js file used by the Tableau component https://github.com/Tab-SE/embedding_playbook/blob/main/components/Tableau/components/view.js:
if (viz) {
tabScale = new TabScale.Scale(viz); // passing the viz DOM element to tabScale https://gitlab.com/jhegele/tabscale
// tabScale.initialize(); // initializing tabScale
viz.addEventListener('firstinteractive', async (event) => { // add the custom event listener to <tableau-viz>
props.setInteractive(true); // update state to indicate that the Tableau viz is interactive
});
}
(I am aware that tabScale should initialize inside the event listener. Even after fixing this you still get the above error)
What do you think about refactoring usage of .getElementsByTagName('iframe')
to .querySelector('iframe')
?