FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Inject styles into Shadow DOM when inside Shadow DOM (#5763) by Simon-Tang · Pull Request #6556 · chartjs/Chart.js · GitHub

/ Chart.js Public

Inject styles into Shadow DOM when inside Shadow DOM (#5763) - #6556

Merged
etimberg merged 1 commit into
chartjs:masterfrom
Simon-Tang:feature-responsive-web-components
Oct 25, 2019
ConversationCommits (1)ChecksFiles changed
Merged

Inject styles into Shadow DOM when inside Shadow DOM (#5763)#6556
etimberg merged 1 commit into
chartjs:masterfrom
Simon-Tang:feature-responsive-web-components

Conversation

Simon-Tang commented Oct 6, 2019 •
edited by kurkle
Loading

Copy link
Copy Markdown
Contributor
  • Injects the inline <style> used by ChartJS into document.head and each Shadow Root as needed
  • Adds a node[EXPANDO]: { containsStyles: boolean } to document.head and each Shadow Root that contains a ChartJS instance
  • Removes the flags platform._style and platform._loaded since we now need to keep track of multiple <style> insertions

To-do(?):

  • Karma tests to test responsive behaviour inside Web Components
  • Update documentation to include the need for manually including the <script> inside Shadow DOMs in the case of disableCSSInjection: true - example workaround

Closes: #5763

kurkle commented Oct 7, 2019

Copy link
Copy Markdown
Member

Looks good!

Can you add a test pen where the functionality can be verified? (Fork https://stackblitz.com/edit/polymer310-testcase-chartjs for example)

Simon-Tang commented Oct 8, 2019

Copy link
Copy Markdown
Contributor Author

Thanks @kurkle. I'm not sure what's up with the error I'm getting when using customElements but here is what I've been using for testing:

https://stackblitz.com/edit/polymer310-testcase-chartjs-zxndkp

I copied my exact testing page into index2.html in the above. I'm getting this error:

Error: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

If any reviewer has the patience to help out with this I would appreciate it a lot! I'm not really sure if I'm missing something obvious to make this work. However I would expect the pen you linked (https://stackblitz.com/edit/polymer310-testcase-chartjs) to also work with the changes in this PR.

kurkle approved these changes Oct 25, 2019
View reviewed changes

kurkle left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Working test case:
https://stackblitz.com/edit/polymer310-testcase-chartjs-avhczw

etimberg merged commit 0b62f28 into chartjs:master Oct 25, 2019
snyk-bot mentioned this pull request Nov 9, 2019
Merged
This was referenced Mar 4, 2020
Open
Open
vpetersson mentioned this pull request Mar 7, 2020
Merged
This was referenced Mar 9, 2020
Closed
Merged
snyk-bot mentioned this pull request Apr 1, 2020
Open
This was referenced Apr 14, 2020
Open
Open
exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
Inject styles into Shadow DOM when inside Shadow DOM (chartjs#5763) (c…
3169d9f 
…hartjs#6556)
This was referenced Jun 1, 2021
Closed
Merged
Closed
Open
Closed
Open
Open
This was referenced Jul 5, 2021
Closed
Open
This was referenced Jul 27, 2021
Closed
Merged
Merged
renovate Bot mentioned this pull request Oct 14, 2021
Merged
1 task
renovate Bot mentioned this pull request Oct 14, 2021
Closed
1 task
jw mentioned this pull request Jan 17, 2022
Open
1 task
This was referenced Jan 21, 2022
Merged
Closed
This was referenced Feb 4, 2022
Closed
Closed
This was referenced Mar 7, 2022
Open
Open
Open
mend-for-github-com Bot mentioned this pull request Aug 13, 2022
Merged
1 task
This was referenced Nov 29, 2022
Closed
Closed
mend-for-github-com Bot mentioned this pull request Jan 26, 2023
Closed
1 task
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
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

etimberg etimberg approved these changes
kurkle kurkle approved these changes

Assignees

No one assigned

Labels

type: bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Chart does not resize inside shadow DOM (e.g. Polymer)

3 participants

Back | FazBrowse Home | New Git URL