alvarotrigo / alvarotrigo/fullPage.js

Shadow DOM support

オープン
#3,586 コメント 6 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
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 はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。