From 30ff0bb8ee1227cdc080594596dff671079df947 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Tue, 22 Feb 2022 18:29:26 -0600 Subject: [PATCH] Update Blog post for scoped elements (#1224) Co-authored-by: Paulus Schoutsen --- blog/2022-02-18-paper-elements.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blog/2022-02-18-paper-elements.md b/blog/2022-02-18-paper-elements.md index b73dbdfb..fa763771 100644 --- a/blog/2022-02-18-paper-elements.md +++ b/blog/2022-02-18-paper-elements.md @@ -13,9 +13,9 @@ Custom Cards using the elements used in the Home Assistant Frontend have never b We are converting our codebase from the deprecated `paper` elements to the new [Material Web Components](https://github.com/material-components/material-components-web-components) from Google. This is to keep our frontend up to date with the latest components and features. ## What should custom cards do? - -You can replace your `paper` elements with `mwc` elements but there is no gaurentee that these elements will be loaded when your users load your editor or cards, like it also was not guaranteed for `paper` elements. We can also not guarentee that we will use these elements forever, and an update of these elements could include breaking changes. We can not support this use case. -Our advise is to bundle your own elements, that don't collide with the elements Home Assistant uses. +Our advice is to bundle the Material Web Components in your custom card using [Scoped Custom Element Registry](https://github.com/lit/lit/tree/main/packages/labs/scoped-registry-mixin). The Home Assistant Frontend loads the [polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) needed for this to work starting with the release of Home Assistant 2022.3. + +This will allow any custom card to utilize the same MWC elements that are used in the Lovelace Editors. You can see an example of this usage in the [Boilerplate Card](https://github.com/custom-cards/boilerplate-card). Other HA elements like the icon picker (``) are not supported in this same way. See [this old blog post](https://developers.home-assistant.io/blog/2020/10/02/lazyMoreInfo#what-about-external-elements) for more information.