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

I can't seem to drag the element with the unset: all

css property .

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

      

        
        
        
      

    

I am using these rules inside a chrome extension, on elements that are injected into the user's browser page (to prevent local styling from affecting my component). Unfortunately, items are no longer being dragged and dropped.

These elements have a property draggable

in html.

I tried pointer-events: auto;

, -webkit-user-drag: auto;

, user-select: all;

but I still can not get to drag elements.

There must be some properties that I need to get back to normal.

If anyone had an idea, I would really appreciate any help on this topic.

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