Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FR: support of shadowdom #25

Closed
mburger81 opened this issue Mar 29, 2019 · 6 comments
Closed

FR: support of shadowdom #25

mburger81 opened this issue Mar 29, 2019 · 6 comments

Comments

@mburger81
Copy link
Contributor

We are creating a web component for drag and drop with stenciljs and your mobile lib.

we give the ability to add a custom drag image, it is working on NON mobile behavior but it is not working on mobile, because you don't support shadow dom.

But stenciljs is realing on web components with shadow dom and css4 variables.

Can you help?
The main problem is the default src.cloneNode(true) is not coping slots and nested custom elements.

Some ideas how we can resolve this?

Not sure if deep cloning on shadowdom is working. One solution could be passing an element to your lib and your lib does not adding this to the dom, but it moves only the given element instead of the cloned element

@mburger81
Copy link
Contributor Author

BTW: Using custom elements with shadow dom and encapsulated styles has the advantage we don'T have to clone and do a deep style. We can use this behavior also to use your lib on other scenarios then only drag and drop.
We can use it to a swiping mechanism and others

@Bernardo-Castilho
Copy link
Collaborator

The simple answer would be to use a custom drag image as shown in the sample:

function handleDragStart(e) {
var dt = e.dataTransfer;
if (dt.setDragImage instanceof Function) {
var img = new Image();
img.src = 'dragimage.jpg';
dt.setDragImage(img, img.width / 2, img.height / 2);
}
}

If that is not an option, I would try to create a fake clone this way:

var clone = document.createElement('div');
clone.innerHTML = elementWithShadownDom.outerHTML;

I guess this may or may not work depending on how the element with the shadow DOM is implemented. If all its main properties are reflected as attributes, it might work pretty well. If not, it probably won't work very well at all.

I am sorry, I am not big on shadow DOM yet...

@mburger81
Copy link
Contributor Author

Hello, It took a while for having time to go on here, so sorry for my late response.

the solution with inner/outer HTML is working fine from the style and performance, and it is working nearly perfect on plain javascript.
But if you use it in combination with an framework like angular where the attribute binding is done by framework the custom elements when they are rendered, they are rendered without bindings and so without data.
See this screenshot, as you can see on top are the widget as they are, and on bottom are the dragged elements, you can see the values are not available. Which honestly is the same problem with our polyfill.
image

Using your lib, which is doing a simple clone, does also not have the framework bindings so, the drag element is without data.

@Bernardo-Castilho
Copy link
Collaborator

Makes sense, thanks for the explanation. Tough problem to solve in a general way.

@mburger81
Copy link
Contributor Author

if we do a document.body.appendChild( angular-component / custom-element) we have this results

WORKING

<angular-component [value]="object.value"/>
<custom-element value="55"/>

NOT WORKING

<custom-element value="{{object.value}}"/>
<custom-element [value]="object.value"/>

really not sure why that, but the problem is also with your simple cloneNode(true) implementation

@Pomax
Copy link
Member

Pomax commented Aug 15, 2024

I'm closing this mostly because of how much time has passed. If this is still a concern, please file a new issue. I recently signed on to this project and would like to make sure we're covering all the bases, while also making sure there are no lingering issues based on old code.

@Pomax Pomax closed this as completed Aug 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants