Components and shadow DOM
MillenniumEarl opened this issue · comments
I open this error with the hope of being able to solve this annoying problem.
I have read the documentation and I don't seem to have found anything about it (take me with a grain of salt because being new to web development I might have skipped something that didn't seem relevant to me) but also any similar questions don't have a very clear answer (to say the true they don't give it at all, see #5772 or this).
Expected Behavior
The materialize component used within a shadow-rooted custom element should show effects (i.e. waves) or perform specific actions (see cards). I have encountered problems with buttons and cards but the problem could affect all components using the waves.
Current Behavior
The component in a shadow DOM has only some of the effects it normally has in the light DOM (i.e. the button changes color on hover but does not have the wave effect when clicked).
Steps to Reproduce (for bugs)
Simply add a component inside a custom element with shadow DOM.
I link two examples on CodePen: buttons and cards.
Context
The problem arose when I was trying to create a component to represent a single game in a game manager using cards (with hidden side) and buttons. Specifically, the component in question is this.
Your Environment
The error presented with:
- Electron 10.1.6 (Chromium 85.0.4183.98)
- Electron 11.0.3 (Chromium 87.0.4280.67)
- Firefox 84.0b6
On Windows 10 20H2 (19042.630)
With the latest available release of materialize on npm