Is there any way to use Material Web Components in LWC?

Question

Is there any way to include the web components externally developed like https://github.com/material-components/material-components-web-components in Lighting web components.

Any points to where to get started if possible would be really helpful.

Thanks, Kiran Machhewar

Answer 1

Using 3rd party web components in LWC is not possible per this https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.security_locker_custom_elements

Third-Party Web Components To prevent security risks, you can’t use third-party web components on the Salesforce platform.

Web components are custom elements. To define a custom element, you must use the customElements.define API. However, this API is global, and allows you to globally register a component name. Registering a name globally is a security risk because an attacker could register any name and take over the page. Lightning Locker’s SecureWindow wrapper blocks the customElements methods that create custom web components.

The SecureWindow wrapper list in the Locker API Viewer tool shows that customElements is not supported.

Created the idea for the same https://success.salesforce.com/ideaView?id=0873A000000PcvhQAC

Upvote the idea if you think having 3rd party web components in LWC is a good idea.

Note: Using react in LWC worked because it was not defining any web component.