Adds classMap and styleMap directives
#486
Conversation
src/directives/css.ts
Outdated
| for (const name in oldInfo) { | ||
| if (!(name in styleInfo)) { | ||
| // setting to `null` to "unset" a previously applied value. | ||
| ((part.committer.element as HTMLElement).style as any)[name] = null; |
There was a problem hiding this comment.
element.style.foo = null does not work in IE11 :( you have to use foo.style.removeProperty(foo)
There was a problem hiding this comment.
Seems to work in testing. Do you know if there are there certain properties for which this doesn't work? (removeProperty doesn't accept the camelCased property name, so would love to avoid that if possible).
There was a problem hiding this comment.
Try this jsbin: http://jsbin.com/kosikijule/edit?html,output the background color should be removed after 2 sec
I notice now that that it works for height but not for backgroundColor, but it can't be due to casing because I've had this issue a lot with properties like overflow when writing css animations.
I understand not wanting to use removeProperty as you'd need to convert camel to dash...
There was a problem hiding this comment.
You can reset by setting the CSS property to an empty string, that should work everywhere including IE11. e.g.
element.style.foo = '';
src/directives/css.ts
Outdated
| * sets these properties to the element's style. | ||
| * @param styleInfo {StyleInfo} | ||
| */ | ||
| export const styleMap = (styleInfo: StyleInfo): Directive<AttributePart> => |
There was a problem hiding this comment.
I think we should split these into separate modules
src/directives/css.ts
Outdated
| const classMapStatics = new WeakSet(); | ||
|
|
||
| /** | ||
| * A directive that applies css classes. This must be used in the `class` attribute. |
src/directives/css.ts
Outdated
| [name: string]: string; | ||
| } | ||
|
|
||
| const classMapCache = new WeakMap(); |
src/directives/css.ts
Outdated
| // handle static classes | ||
| if (!classMapStatics.has(part)) { | ||
| part.committer.element.className = | ||
| part.committer.strings.reduce((a, c) => `${a} ${c}`); |
There was a problem hiding this comment.
Use join instead of reduce
src/directives/css.ts
Outdated
| // handle static styles | ||
| if (!styleMapStatics.has(part)) { | ||
| (part.committer.element as HTMLElement).style.cssText = | ||
| part.committer.strings.reduce((a, c) => `${a} ${c}`); |
src/directives/css.ts
Outdated
| }); | ||
|
|
||
| const styleMapCache = new WeakMap(); | ||
| const styleMapStatics = new WeakSet(); |
Fixes #467