Added a flag to selectively use shadow dom #1101
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Users can use the Shadow DOM instead of the original, through the `data-shadow-root` property of the base element. `data-shadow-dom` attribute should be `open` or `closed`, or implicitly use `open` when it is empty. When Shadow DOM is enabled, it can protect the host styles by isolating style changes that occur inside the Worker. Uses of `<link>` for external stylesheets inside the Worker are also isolated, so they also need to be moved inside the base element. Resolves ampproject#1093
|
This looks amazing! I'll give it a proper review this week. |
samouri
reviewed
Oct 13, 2021
Co-authored-by: Jake Fried <samouri@users.noreply.github.com>
|
Added a very simple one |
samouri
approved these changes
Oct 13, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #1093
Users can use the Shadow DOM instead of the original, through the
data-shadow-domproperty of the base element.data-shadow-domattribute should beopenorclosedWhen Shadow DOM is enabled, it can protect the host styles by isolating style changes that occur inside the Worker.
Uses of
<link>for external stylesheets inside the Worker are also isolated, so they also need to be moved inside the base element.Note:
Using shadow dom may have side effects. I leave some issue I found here.
In the React example, event listeners don't work at all. I'm guessing it's a React bug since there's no problem in the same Preact example.
Shadow DOM is known to have very little performance penalty, but in high-load apps like DBMon seem to have frame drops quite noticiable actually.
