-
Notifications
You must be signed in to change notification settings - Fork 319
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
Adds static get styles()
#401
Changes from 1 commit
670eb4c
b593e1d
fd881dc
8ae6692
8faa0c7
56bfa0b
58bd5be
6a4649e
ca6206d
dcbffef
583f515
352494a
6f6afec
80737c0
27eb2ad
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
static get styles()
This should be implemented to return an array of styles defined using the `css` tag function. These styles will be applied with `adoptedStyleSheets` where available and shimmed when not. WIP: needs tests.
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
/** | ||
@license | ||
Copyright (c) 2017 The Polymer Project Authors. All rights reserved. | ||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
Code distributed by Google as part of the polymer project is also | ||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
*/ | ||
export const supportsAdoptedStyleSheets = ('adoptedStyleSheets' in Document.prototype); | ||
|
||
class LiteralString { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would name this There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
|
||
value: string; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
|
||
constructor(value: string) { | ||
this.value = value.toString(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Removed. |
||
} | ||
|
||
toString() { | ||
return this.value; | ||
} | ||
} | ||
|
||
const literalValue = (value: LiteralString) => { | ||
if (value instanceof LiteralString) { | ||
return value.value; | ||
} else { | ||
throw new Error( | ||
`non-literal value passed to 'css' function: ${value}` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It'd be nice to allow user-provided values in safe contexts with context-aware auto-escaping. Not sure how far we can go purely client-side. We may be able to allow directive-like functions that return a sentinel value that parses correctly for a particular context, then replace it, lit-html style. Soy does interesting things here at compile time. Maybe @mikesamuel has ideas. |
||
); | ||
} | ||
}; | ||
|
||
export const css = (strings: string[], ...values: any[]) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should consider having this return an object with an optional This would change below to just: const cssText = values.reduce((acc, v, idx) =>
acc + literalValue(v) + strings[idx + 1], strings[0]);
return new CSSResult(cssText); There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
const cssText = values.reduce((acc, v, idx) => | ||
acc + literalValue(v) + strings[idx + 1], strings[0]); | ||
let result; | ||
if (supportsAdoptedStyleSheets) { | ||
result = new CSSStyleSheet(); | ||
// TODO(sorvell): fix type. | ||
(result as any).replaceSync(cssText); | ||
} else { | ||
result = new LiteralString(cssText); | ||
} | ||
return result; | ||
}; | ||
|
||
export const cssLiteral = (strings: string[], ...values: any[]) => { | ||
return new LiteralString(values.reduce((acc, v, idx) => | ||
acc + literalValue(v) + strings[idx + 1], strings[0])); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,8 @@ | |
* subject to an additional IP rights grant found at | ||
* http://polymer.github.io/PATENTS.txt | ||
*/ | ||
import {supportsAdoptedStyleSheets} from './css-tag.js'; | ||
export * from './css-tag.js'; | ||
|
||
/** | ||
* Returns the property descriptor for a property on this prototype by walking | ||
|
@@ -215,6 +217,14 @@ export abstract class UpdatingElement extends HTMLElement { | |
|
||
static properties: PropertyDeclarations = {}; | ||
|
||
/** | ||
* Array of styles to apply to the element. The styles should be defined | ||
* using the `css` tag function. | ||
*/ | ||
static get styles() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add type of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added specific type for this and used it here. |
||
return []; | ||
} | ||
|
||
/** | ||
* Returns a list of attributes corresponding to the registered properties. | ||
*/ | ||
|
@@ -462,7 +472,25 @@ export abstract class UpdatingElement extends HTMLElement { | |
* @returns {Element|DocumentFragment} Returns a node into which to render. | ||
*/ | ||
protected createRenderRoot(): Element|ShadowRoot { | ||
return this.attachShadow({mode : 'open'}); | ||
const shadowRoot = this.attachShadow({mode : 'open'}); | ||
const styles = (this.constructor as typeof UpdatingElement).styles; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I (weakly) feel like all this should be in LitElement, since it does the actual rendering. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems like the |
||
if (window.ShadyCSS !== undefined && !(window.ShadyCSS as any).nativeShadow) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. comment the three cases a little There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
// TODO(sorvell): fix type | ||
(window.ShadyCSS as any).prepareAdoptedCssText(styles, this.localName); | ||
} else if (supportsAdoptedStyleSheets) { | ||
// TODO(sorvell): fix type | ||
(shadowRoot as any).adoptedStyleSheets = styles; | ||
} else { | ||
this.requestUpdate(); | ||
this._updatePromise.then(() => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since |
||
styles.forEach((s) => { | ||
const style = document.createElement('style'); | ||
style.textContent = s; | ||
shadowRoot.appendChild(style); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to match Constructible StyleSheet ordering these have to come first in the ShadowRoot. Is that happening because you're directly waiting There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yup, comment added. Note, they come last in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't they have to come first in case there are There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok, I see: https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets Let's include a link to the spec |
||
}); | ||
}); | ||
} | ||
return shadowRoot; | ||
} | ||
|
||
/** | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be 2019 I assume