can't drag element that has css property unset: all

Question

It seems I'm not able to drag an element that has unset: all css property.

.my-component {
  all: initial;
  * {
    all: unset;
  }
}

I use these rules inside a chrome extension, on elements that are being injected in the user browser page (to prevent local style affecting my component). Unfortunately, elements are not draggable anymore.

Those elements have the draggable property on in html.

I tried pointer-events: auto;, -webkit-user-drag: auto;, user-select: all; but I still can't manage to make elements draggable.

There must be some properties I have to set back to normal.

If someone had an idea, I would highly appreciate any help on this topic.

Edit : see this codepen - https://codepen.io/thomaslh/pen/OgQNMz

Answer 1

Looks like you need to add 2 CSS properties. user-select and -webkit-user-drag

.el {
  all: unset;
  -webkit-user-drag: element;
  user-select: none;
}

<div class="el" draggable="true">
  drag
</div>