René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Plotly.js is incompatible with Chrome's native shadow DOM implementation","articleBody":"### Context\r\nI develop and maintain [ginkgobioworks/plotly-plot](https://github.com/ginkgobioworks/plotly-plot), a Polymer element that encapsulates plotly.js. Polymer is a web-component framework written by Google, which uses browser functionality known as the \"shadow DOM\" to isolate the internals of web components from the rest of the page.\r\n\r\nPolymer 1.x has two kinds of shadow DOM implementations: native shadow DOM (v0), and a\r\nshim called \"shady DOM.\" Native shadow DOM is newer and yields improved\r\nperformance, but it has poor support in browsers outside of Chrome\r\nand can cause problems with existing code. For this reason, shady DOM is\r\nstill the default implementation in Polymer 1.x.\r\n\r\n### Issue\r\nUnfortunately, native shadow DOM is currently incompatible with plotly.js. The\r\nicon toolbar layout code in the plotly.js library fails for all plotly plots\r\nrendered inside a shadow DOM.\r\n\r\n### Example\r\nSince it's a pain to create your own elements without the tools in a code pen, the easiest example to observe is on the [plotly-plot demo page](http://ginkgobioworks.github.io/plotly-plot/components/plotly-plot/demo/).\r\n\r\nYou can render the page either with shady DOM (the default) or with shadow DOM by [passing in the `?dom=shadow` GET parameter](http://ginkgobioworks.github.io/plotly-plot/components/plotly-plot/demo/?dom=shadow), which forces Polymer to use native shadow DOM v0 in [browsers that support it](http://caniuse.com/#feat=shadowdom).\r\n\r\n#### Expected/Observed\r\nUnder shady DOM (no GET parameter), the elements behave as expected. Under shadow DOM (with the GET parameter), however, the toolbars fail to render entirely.\r\n\r\n### Impact\r\nI don't know why this is the case. It might have to do with SVG support for the buttons, or CSS effects.\r\n\r\nThe work-around on my side is that anyone who consumes my element must not turn on native shadow DOM rendering on any page that renders a `plotly-plot` widget. This is fine for small, simple pages, but can be a real drag when front-end performance is at stake.\r\n\r\nI'm wondering if there might be a relatively easy fix that would prevent this from happening—if there is, it'd be nice to do it. If not, it's probably not worth doing any serious rewriting for this use case.\r\n\r\nIn any case, thought you'd be interested to know.\r\n\r\n","author":{"url":"https://github.com/myw","@type":"Person","name":"myw"},"datePublished":"2017-03-02T07:28:44.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":14},"url":"https://github.com/1433/plotly.js/issues/1433"}