alvarotrigo / alvarotrigo/fullPage.js
Shadow DOM support
- 主要言語
- JavaScript
- スター
- 35.4k
- フォーク
- 7.1k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
### Description
The library doesn't work with a `shadowRoot` selector. I'm using [`lit-element`](https://github.com/Polymer/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:
```javascript
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?
コントリビューションガイド
評価
この issue はまだ評価されていません。