Can Material Web be extended?

[luis-alfonso-sandoval]

Hi Material Web team!

My team is considering building a components library by wrapping some of the Material Web components. We want to keep the same API for our wrappers so that anyone can migrate seamlessly from Material Web to our library.

We are trying to find the best way to pass all properties from the wrapper to the Material Web component. Sometimes we need to override or add new properties. We want to avoid defining every property all over again and have less verbose code.

We have considered three approaches:

• Extending from Material Web classes
• Creating mixins
• Spreading props props in a React style

Is it possible to achieve our goals with any of these approaches? Have you come up with other ways of extending from Material Web components? Any ideas would be helpful.

Thank you for your time and consideration.

[asyncLiz]

Hi! This is 100% something we encourage and want to support. We already have teams that wrap our components as well to vend their own component libraries.

We don't have a great dev-x way to do this other than creating properties and forwarding them. Would love to get a discussion started on better ways to handle wrapping.

Extending elements is also encouraged, though there are some caveats to what is supported. Overriding protected methods or relying on shadow root internal elements/CSS/classes aren't supported.