Shadow DOM support

[alejost848]

Description

The library doesn't work with a shadowRoot selector. I'm using lit-element and fullpage.js can't find the elements.

Link to isolated reproduction with no external CSS / JS

Code: https://glitch.com/edit/#!/gossamer-planarian?path=my-app.js:27:32 Live: https://gossamer-planarian.glitch.me/

Steps to reproduce it

1. Initialize fullpage.js in Shadow DOM with a selector like this.shadowRoot.getElementById("fullpage")
2. fullpage.js can't find the elements

Versions

Firefox, Chrome, Edge, almost certain all others too.

Temporal solution

The only solution I've found so far is to disable Shadow DOM for the lit-element component using:

createRenderRoot(){
  return this;
}

Then, I'm able to initialize fullpage.js using document.getElementById("fullpage") instead of this.shadowRoot.getElementById("fullpage").

Code: https://glitch.com/edit/#!/wobbly-fall?path=my-app.js:27:2 Live: https://wobbly-fall.glitch.me/

In this example it works fine, but in a code that includes shared styles, it breaks, so it's not a full solution for now. It would be great if there was a way to allow Shadow DOM selectors in fullpage.js. I tried to look into the code, but didn't know what to do exactly to fix this. @alvarotrigo Do you have any ideas?

[alvarotrigo]

Thanks for reporting it! 👍 I'll take a look at it!

[alvarotrigo]

@alejost848 the live demo doesn't work anymore. Can you please provide a an isolated reproduction in jsfiddle or codepen?

[alejandro-turing]

@alvarotrigo The demo still works, just give it some time. It can take around 1 minute to load on Glitch.

[alvarotrigo]

@alejandro-turing any suggestion for the improvement? I guess the way to solve this would be by creating a web component for fullpage.js?

[alejost848]

I'm not entirely sure, but I don't think that creating a web component for it is the only solution, although it would be awesome to have. The problem is that right now you can pass an id to initialize fullpage, but a shadowRoot element doesn't work.

new fullpage('#fullpage', {
  //This works
});

new fullpage(this.shadowRoot.getElementById("fullpage"), {
  //This doesn't work
});

I'm just guessing at this point, but maybe there's something in the code for parsing the selector that doesn't allow something like this (perhaps due to jQuery)?

[alvarotrigo]

There are some other problems too. The CSS file won't be able to be applied to any elements within a shadow dom.