Update Blog post for scoped elements (#1224)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
Zack Barett 2022-02-22 18:29:26 -06:00 committed by GitHub
parent ddd3c9f683
commit 30ff0bb8ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -14,8 +14,8 @@ We are converting our codebase from the deprecated `paper` elements to the new [
## What should custom cards do? ## 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 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.
Our advise is to bundle your own elements, that don't collide with the elements Home Assistant uses. 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 (`<ha-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. See [this old blog post](https://developers.home-assistant.io/blog/2020/10/02/lazyMoreInfo#what-about-external-elements) for more information.