Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Encapsulate rikaikun popup in shadowdom to prevent weird interactions with host page #221

Closed
melink14 opened this issue Aug 25, 2020 · 1 comment · Fixed by #933
Closed

Encapsulate rikaikun popup in shadowdom to prevent weird interactions with host page #221

melink14 opened this issue Aug 25, 2020 · 1 comment · Fixed by #933
Assignees
@melink14
Labels
Code health Issues which if fixed would improve the health of the project (as opposed to new features/bugs) easy enhancement good first issue released

Comments

@melink14
Copy link
Owner

Currently, there's a CSS reset in rikaikun to avoid most issues but using shadow dom should be more scalable.

It also will allow us to simply CSS since it will be scoped.

References:
https://developers.google.com/web/fundamentals/web-components/shadowdom
Maybe useful example: https://blog.railwaymen.org/chrome-extensions-shadow-dom
@melink14 melink14 added enhancement easy Code health Issues which if fixed would improve the health of the project (as opposed to new features/bugs) good first issue labels Aug 25, 2020
@melink14 melink14 mentioned this issue Aug 25, 2020
Closed
@melink14 melink14 mentioned this issue Jul 18, 2021
Closed
@melink14 melink14 mentioned this issue Aug 25, 2021
Open
@melink14 melink14 mentioned this issue Oct 26, 2021
Closed
@melink14 melink14 self-assigned this Apr 1, 2022
melink14 added a commit that referenced this issue Apr 2, 2022
@melink14
feat(ui): Isolate rikaikun popup from host page via shadow Dom and `a…
2eaf0fc 
…ll: revert`

- Creates a div inside of shadow root to contain all styles and modifications.
- Updates CSS to use `all: revert` instead of previous adhoc reset.
- Installs CSS directly into the shadow DOM as per best practices.
- Fallsback to `all: initial` for older Chrome browsers.
- Removes special check for text files since chrome renders them as normal HTML pages.

Fixes #221
@melink14 melink14 mentioned this issue Apr 2, 2022
Merged
melink14 added a commit that referenced this issue Apr 2, 2022
@melink14
feat(ui): Isolate rikaikun popup from host page via shadow DOM and `a…
e6a6e7a 
…ll: revert` (#933)

* feat(ui): Isolate rikaikun popup from host page via shadow Dom and `all: revert`

- Creates a div inside of shadow root to contain all styles and modifications.
- Updates CSS to use `all: revert` instead of previous adhoc reset.
- Installs CSS directly into the shadow DOM as per best practices.
- Fallsback to `all: initial` for older Chrome browsers.
- Removes special check for text files since chrome renders them as normal HTML pages.

Fixes #221
melink14 pushed a commit that referenced this issue Apr 4, 2022
@semantic-release-bot
chore(release): 2.3.0
0bf8afb 
## [2.3.0](v2.2.5...v2.3.0) (2022-04-04)

### Features

* **ui:** Isolate rikaikun popup from host page via shadow DOM and `all: revert` ([#933](#933)) ([e6a6e7a](e6a6e7a)), closes [#221](#221)

### Bug Fixes

* **detection:** Copy text affecting style properties of input/textarea elements when creating fake ([#886](#886)) ([23fc0df](23fc0df)), closes [#672](#672)
* **dict:** Update dictionaries to latest versions ([#954](#954)) ([deae6f5](deae6f5))
* **ui:** Only show info popups in the main frame of a tab ([#948](#948)) ([90c7b21](90c7b21))
@melink14
Copy link
Owner Author

melink14 commented Apr 4, 2022

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melink14 melink14

Labels
Code health Issues which if fixed would improve the health of the project (as opposed to new features/bugs) easy enhancement good first issue released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(ui): Isolate rikaikun popup from host page via shadow DOM and all: revert melink14/rikaikun
1 participant
@melink14