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.

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

Change classMap to set classes correctly for SVGs #932

Merged
merged 8 commits into from Jun 14, 2019
Merged

Change classMap to set classes correctly for SVGs #932

merged 8 commits into from Jun 14, 2019

Conversation

AdamVig
Copy link
Contributor

@AdamVig AdamVig commented May 23, 2019

The assignment to element.className in classMap was causing the error setting getter-only property "className".

According to the SVG specification, className is a read-only property. This differs from className on Element, which can be set.

Fixes #930.

@AdamVig
Change classMap to set classes correctly for SVGs
3ae0fff 
The assignment to `element.className` in `classMap` was causing the
error `setting getter-only property "className"`.

According to [the SVG
specification](https://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable),
`className` is a read-only property. This differs from [`className` on
Element](https://developer.mozilla.org/en-US/docs/Web/API/Element/className),
which can be set.
@AdamVig AdamVig mentioned this pull request May 23, 2019
Closed
6 tasks
jridgewell
jridgewell previously approved these changes May 23, 2019
View reviewed changes
Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

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

Thanks!

jridgewell
jridgewell approved these changes May 23, 2019
View reviewed changes
Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

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

Thanks for the work!

jridgewell
jridgewell suggested changes May 23, 2019
View reviewed changes
Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

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

We have to go back to el.setAttribute('class', value) due to IE11. Sorry!

@AdamVig
Copy link
Contributor Author

AdamVig commented May 23, 2019 •
edited

Fixed!

For posterity, here is the Can I Use page for classList. For IE 10 and 11, it says:

Does not have support for classList on SVG or MathML elements.

Which matters here because this pull request's specific intent is to fix support for SVG elements.

jridgewell
jridgewell previously approved these changes May 23, 2019
View reviewed changes
Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

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

Sorry for the back and forth. Thanks for doing the work, though!

@jridgewell
Copy link
Contributor

Ping @justinfagnani, this is good to merge.

@justinfagnani
Copy link
Collaborator

Thanks @AdamVig and @jridgewell!

@AdamVig could you update the changelog for this? Otherwise, looks good.

@AdamVig
Copy link
Contributor Author

AdamVig commented Jun 14, 2019

@justinfagnani Sure, done.

@justinfagnani justinfagnani merged commit dbb3312 into lit:master Jun 14, 2019
justinfagnani added a commit that referenced this pull request Jun 14, 2019
@justinfagnani
Revert "Change classMap to set classes correctly for SVGs (#932)"
641927a 
This reverts commit dbb3312.
@justinfagnani justinfagnani mentioned this pull request Jun 14, 2019
Merged
@justinfagnani
Copy link
Collaborator

@AdamVig unfortunately, IE11 doesn't support classList on SVG, so CI failed on master after the merge.

Looks like Stencil ran into the same problem here: ionic-team/stencil#1079
We can do something similar use setAttribute for SVG.

justinfagnani added a commit that referenced this pull request Jun 14, 2019
@justinfagnani
Revert "Change classMap to set classes correctly for SVGs (#932)"
2120a94 
This reverts commit dbb3312.
@blikblum
Copy link

IE11 doesn't support classList on SVG

Only test uses classList. The actual code already uses setAttribute, so is needed to update only the tests

@justinfagnani
Copy link
Collaborator

No, the problem is in the classMap directive itself: https://github.com/Polymer/lit-html/blob/master/src/directives/class-map.ts#L60

What's happening is that this PR fixes the first error with classMap on SVG, and so exposes the second, which is IE-only.

neuronetio pushed a commit to neuronetio/lit-html that referenced this pull request Dec 2, 2019
@AdamVig @justinfagnani
Change classMap to set classes correctly for SVGs (lit#932)
6b46e04 
The assignment to `element.className` in `classMap` was causing the
error `setting getter-only property "className"`.

According to [the SVG
specification](https://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable),
`className` is a read-only property. This differs from [`className` on
Element](https://developer.mozilla.org/en-US/docs/Web/API/Element/className),
which can be set.
neuronetio pushed a commit to neuronetio/lit-html that referenced this pull request Dec 2, 2019
@justinfagnani
Revert "Change classMap to set classes correctly for SVGs (lit#932)"
64f6dd5 
This reverts commit dbb3312.
@jridgewell jridgewell mentioned this pull request Jan 20, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@blikblum blikblum blikblum left review comments

@justinfagnani justinfagnani justinfagnani approved these changes

@jridgewell jridgewell jridgewell left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

classMap directive does not work with SVG
4 participants
@AdamVig @jridgewell @justinfagnani @blikblum