MDL in a shadow dom node

[brandonmp]

I'm using MDL in a content script for a Chrome Extension. To keep the CSS from bleeding, I'm using a shadowDOM node to limit material.css from leaking into global scope.

However, this seems to break material.js. Specifically, clicking a button no longer works. Looking material.js, it makes frequent use of document.

I tried replacing calls to document with calls to document.querySelector('#shadowroot').shadowRoot (to limit the scope of any DOM manipulation to the shadow DOM), but there are way too many references for tht to work safely.

Has anyone had any success doing this, or any advice? The primary components I need are Tabs and Button.

[jvivs]

If you're using webpack to bundle, have you tried applying your fix as a shimmed module for document?

[brandonmp]

afraid i'm not sure what you mean--my fix, as in my extension content script?

& all I know about shimmed modules is that they're basically passed through webpack into the bundle w/o being parsed, right? If that's the case, I don't think I understand 'shimming a module for document'

[jvivs]

Fair point, there are multiple kinds of shimming available with webpack.

I was thinking of the ProvidePlugin which enables the replacement of a free variable like document with a module.

So your module would be something like this:

// shadow-root
module.exports = ((root) => root.document.querySelector('#shadowroot').shadowRoot))(window);

And your webpack build would contain something like this:

new webpack.ProvidePlugin({
  "document": "shadow-root"
});

That make any more sense?

[brandonmp]

ahh got it--i hadn't thought to use webpack for the substitution, that's clever.

For brevity's sake I ended up just skipping shadowDOM & gutting mdl global styles to avoid spillage (eg just removing all css that affected html tags, but looking to make it better encapsulated in the future so I'll give this a go.

[jvivs]

Yeah, there's definitely a lot in there. I haven't tried applying it to shadow dom use cases though. If you do find it works, I'd love to know!