V2: The attribute hidden is ignored and removed by <cropper-shade> and <cropper-selection>

[oschildt]

I am going to use Cropper also as Image Editor for resizing, rotating, flipping and cropping. I want that the crop area per default is not visible. For that, I put the attribute hidden in the < cropper-shade > and < cropper-selection >.

But it is ignored, the selection area is visible, and the attribute hidden and not present in the DOM node when I check the node with the debugger. However, if I set this attribute manually in the debugger, the selection disappears correctly.

If I put the attribute hidden to it is considered.

Use this template for reproducing.

let template = 
        '<cropper-canvas background>'
        + '<cropper-image></cropper-image>'
        + '<cropper-shade hidden></cropper-shade>'
        + '<cropper-handle action="move" plain></cropper-handle>'
        + '<cropper-selection initial-coverage="0.8" movable resizable zoomable hidden>'
        + '<cropper-grid role="grid" bordered covered></cropper-grid>'
        + '<cropper-crosshair centered></cropper-crosshair>'
        + '<cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>'
        + '<cropper-handle action="n-resize"></cropper-handle>'
        + '<cropper-handle action="e-resize"></cropper-handle>'
        + '<cropper-handle action="s-resize"></cropper-handle>'
        + '<cropper-handle action="w-resize"></cropper-handle>'
        + '<cropper-handle action="ne-resize"></cropper-handle>'
        + '<cropper-handle action="nw-resize"></cropper-handle>'
        + '<cropper-handle action="se-resize"></cropper-handle>'
        + '<cropper-handle action="sw-resize"></cropper-handle>'
        + '</cropper-selection>'
        + '</cropper-canvas>';

[oschildt]

I found the reason.

The host setup for hidden is

var style$8 = `:host([hidden]){display:none!important}`;

It is not used for the < cropper-shade > and < cropper-selection >. And even if you extend the styles for them by hidden, it does not work, because there are other settings with display:block ... important what overrides display:none

[fengyuanchen]

Just remove the initial-coverage="0.8" attribute from the <cropper-selection /> element.