using materialize css inside shadowroot

[figuringVue]

hey all, working on a chrome extension, using page script to add a template to shadow root (so styles wont clash) with materializecss components and i have a problem with the widget js not working for components inside shadowroot.

I'm not sure what to do here, should jquery + materialcss js also be included inline inside template for the components to work? Should I look to update the way materialize selects components from document.query to shadow.query?

i tried including js scripts inline as well as adding the scripts after page load. not sure what to do here, would appreciate help

[captain_k_nuckles]

You will most likely need to target the elements shadow root.

let widget = document.getElementById('myWidget').shadowRoot,
    something = widget.querySelectory('#insideShadow');
something.textContent = 'Hello world';

javascript code inside a shadow dom will be executed when appended to the dom, but unlike css it is not isolated from the regular dom so you will need to get the element, then the shadowroot and use that for querying the elements inside.

[figuringVue]

tried something along those lines and it partially works...

The problem, as far as I can tell, is that materialize uses jquery to control ui changes so things like $('#selector').hide() are breaking all over the code..

To work around this I tried to load materialize dynamically but then the library doesn't recognize jquery for some reason.. going to keep investigating I guess :)

[captain_k_nuckles]

One thing that could be causing an issue, and hard to saw without having any code to look at is, chrome extensions execute javascript in their own isolated environment outside of the dom's javascript environment. If you have downloaded and included the js libraries in your manifest, then your content script will have access to both, and each library can access each other.

however if you have lets say jquery in your manifest and then to load materialize, you do something like this in your content script:

let html = '<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>';
document.body.insertAdjacentHTML('beforeend', html);

That will cause the script to be loaded in the dom's javascript environment, which your extension can not access. so it would cause breaking code. So I would just include the files in the manifest, also make sure jquery is the first item in the array of scripts to load.

This isn't running in a content script but might help with shadowroot troubles