Polymer 3 and Web Components

[ralcar]

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

Cant find the label sidebar..

2. Describe the bug or feature

Trying to make this project work with Polymer 3.0 and the LitElement (lit-html).
Cant reference via npm since its not in esmodules (please add!), but using the CDN script tag.
I setup the Draggable most default example in the _firstRendered() (tried other places also), but the items wont become draggable. Here is my code:

<div class="drag">
 <div class="draggable-source">Please drag me</div>
</div>

...

_firstRendered() {
  const draggable = new Draggable.Draggable(this._root.querySelectorAll(".drag"));

  draggable.on('drag:start', () => console.log('drag:start'));
  draggable.on('drag:move', () => console.log('drag:move'));
  draggable.on('drag:stop', () => console.log('drag:stop'));
  draggable.on('draggable:initialize', () => console.log('draggable:initialize'));
}

tried different combos for the constructor of Draggable, passing it which classnames to be draggable etc. Am i right to think that its the Shadow DOM that stops it from working? Since this does not yield a result: document.querySelector('.drag')?

3. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

4. Please tell us about your environment:

• Library version: [1.0.0-beta.7]
• Browsers: [Chrome 66]
• Tech stack: [Polymer 3 | lit-html | WebComponents]

[tsov]

Am i right to think that its the Shadow DOM that stops it from working?

Unfortunately yes, but supporting Shadow DOM is a big goal for us and currently being worked on 👍 Expect it to be one of the next features we release

[ralcar]

VERY happy to hear that! The library looks awsome, was really sad when i realized that it didnt work.
In fact almost no drag library works for ShadowDOM, everything is either built on jQuery and has loads of dependencies, or its all for React, so very happy to hear that us WebComponent people are getting some love finally 😄

[ralcar]

Please work in this! 😄
I follow every commit right now like a true stalker 😄

[JosefJezek]

duplicate of #153

[safinazward]

I was trying to do the same but it did not work with shadow DOM.
I hope the support for shadow DOM will be ready soon

[ralcar]

@tsov Can i ask if this is worked on at all or if i should try to find other solution?

[beefchimi]

@ralcar I am not sure what the status of this is and I have not heard from @tsov about it so I think you will need to find another solution. Sorry 😞

[aletorrado]

Any update about this feature?

[klaussa]

+1

[minicatsCB]

Hello, hope you are all doing well. I just wanted to check in with you and see how the issue is going. I know there might be other demanding tasks, so I appreciate your work and dedication.

As of today, Web Components are widely supported by all major browsers and Lit is one of the multiple tools that facilitate their development and documentation. So I think this feature can be of interest to an increasingly amount of people.

I tried my self to integrate Draggable into a simple Lit starter project. Installed with NPM, imported inside a Lit component, created a new instance with new Sortable(...) and attached some event listeners.

My code for reference:

import { LitElement, html } from 'lit';
import Sortable from '@shopify/draggable/build/esm/Sortable/Sortable.mjs';

export class MyElement extends LitElement {
  constructor() {
    super();
    this._sortableInstance = null;
  }

  firstUpdated() {
    this._sortableInstance = new Sortable(this.shadowRoot.querySelectorAll('ul'), { draggable: 'li' })
      .on('drag:start', () => console.log('drag:start'))
      .on('drag:move', () => console.log('drag:move'))
      .on('drag:stop', () => console.log('drag:stop'));

    console.log(this._sortableInstance); // <--- See below screen capture to see the output
  }

  render() {
    return html`
      <ul>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>    
      </ul>
    `;
  }
}

window.customElements.define('my-element', MyElement);

It works but the event handlers don't fire. It is because of shadow DOM as the OP said?
The same code but in a simple HTML + Vanilla JavaScript file works.

I'm not very familiar with the technical details, but I'm curious to hear about the progress and challenges. I want to understand what you're doing and how it works. Is there anything I can do to help?

Thanks!