Migration guide for @uploadcare/blocks v0.39.0

BREAKING CHANGES

  • Shadow DOM is removed from the project. Now, we have a global style.
    See below for more details.

New styles

Previously, we had Shadow DOM in CSS, but now we have a simple CSS. We are decline from the idea use Shadow DOM.

Detailed information about the new CSS can be found on the styles page.

Migration steps

Case 1. You were using a default Shadow DOM without any customizations

You were using styles via Shadow DOM by css-src:

1<lr-file-uploader-regular
2  ctx-name="my-uploader"
3  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.39.0/web/lr-file-uploader-regular.min.css"
4></lr-file-uploader-regular>

However now you need to use global style include by link:

1<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.39.0/web/lr-file-uploader-regular.min.css">
2
3<lr-file-uploader-regular
4  ctx-name="my-uploader"
5></lr-file-uploader-regular>

Case 2. You were using a Shadow DOM with customizations

Sometimes, you might need to make custom styles for your component, and you would do it through an inline css that you add to shadowStyles. Now it’s much simpler to use the css you know with its specificity:

1import * as LR from "@uploadcare/blocks";
2
3LR.FileUploaderRegular.shadowStyles = /* CSS */ `
4  :host lr-simple-btn button {
5    background-color: #f00;
6  }
7`;
8
9LR.registerBlocks(LR);
1<lr-file-uploader-regular
2  ctx-name="my-uploader"
3  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.39.0/web/lr-file-uploader-regular.min.css"
4></lr-file-uploader-regular>

Now you need to use global css:

1lr-file-uploader-regular lr-simple-btn button {
2  background-color: #f00;
3}
1<lr-file-uploader-regular
2  ctx-name="my-uploader"
3></lr-file-uploader-regular>

See the styles page for more details.