Attach a Mobilscroll element to a CustomElements

Date and time pickers
1

Attach a Mobiscroll element to a element within a customElements is not working. Please help. How can we selected the element.

How to component is created:
customElements.define(‘mod-event’, class extends HTMLElement {
…
var shadow = this.attachShadow({ mode: ‘open’ });

The custom component include this field:
mobiscroll.date( ‘#date’ , {…}) -> doesn’t work

2

how the ‘selector’ is working? Can we refer to the item using something else than the ID?

mobiscroll.date( ‘#date’ , {…})

3

Hi @Dominic,

You can use any valid css selector it doesn’t have to be an ID. The component in the background uses the document.querySelectorAll method for finding the appropriate node.

Besides the sting selector you can also pass a HTMLElements as the first argument. This might help you in case of shadowDOM elemets which are not part of the DOM.

Here is an example:

  const dateInput = el.shadowRoot.querySelector('.bday'); // accessing the shadowDOM elements throught the shadowRoot interface
  const dateInst = mobiscroll.date(dateInput);

Let me know if this helps!

1 Like
4

Thank you Szili, this fixed my problem!

const dateInput = el.shadowRoot.querySelector('.bday');
const dateInst = mobiscroll.date(dateInput);