Components and shadow DOM about materialize

[danice]

First, to use last version of materialize, you should use scripts from
https://www.jsdelivr.com/package/npm/@materializecss/materialize

For the shadow-dom problem, I think it is because card component is using this for the click event:

document.addEventListener("DOMContentLoaded", () => {
      document.body.addEventListener('click', e => {
        const trigger = <HTMLElement>e.target;

        const card: HTMLElement = trigger.closest('.card');
        if (!card) return;

And the target element in a shadow-dom is the shadowRoot, not the card element (see Shadow DOM and events)

I'm not sure of what will be the solution. Maybe the proper solution will be to convert every component to a custom element but this would be a big change and I'm not sure of the implications.

[Lord-Leonard]

Well, thanks for the Info :) I will try to See What I can do with that.

[LoganTann]

Hi, I feel bad for around 10 months of inactivity.
I can see well in the dev tools that the card don't register an event inside a shadow root. About the waves, it might be similar.

As explained in the original issues, this might be related to how materialize selects events.
Unfortunately I don't know enough, and I don't have free time to investigate more. Added the bug label.

Feel free to reply if you can help to any ways.

[Lord-Leonard]

Is there any plan on supporting webcomponents, especially the shadow root?

[danice]

A possible solution could be this:

change the static init of the components:

static Init() {
    document.addEventListener("DOMContentLoaded", () => {
      document.body.addEventListener('click', e => {
        const trigger = <HTMLElement>e.target;

with something like this:

static Init(rootElement = null) {
   if (rootElement == null)
     rootElement = document.body
   document.addEventListener("DOMContentLoaded", () => {
      rootElement.addEventListener('click', e => {
        const trigger = <HTMLElement>e.target;

This will maintain backward compatibility and you can call the init method with the shadowRoot (for each card in a different shadow DOM).