Re: [polymer-dev] Re: Allow components to use global CSS
Kevin, That does clear everything up. I appreciate you taking the time to put together such a thorough answer. Thanks! On Friday, March 9, 2018 at 12:37:01 PM UTC-5, Kevin Schaaf wrote: > > > It is impossible to see a style outside of a web component? If the > answer is yes, then how does one keep from duplicating styles and attempt > some reuse? > > Browsers implementing Shadow DOM have optimizations to ensure that > duplicating the same tag in the shadow DOM of element instances is > low-cost. If your question is practically, "how do I share styles between > two elements using lit-html?", the pattern we are leaning towards are > putting common styles in modules that e.g. export const sharedStyles = > html`<style>/*shared styles...*/`, import that into the element > code, and then interpolate that into the template during render()ing. > > > I see, but shouldn't this be a choice for the implementer? > > That said, we do in fact give you the choice. When using LitElement, you > can override the default implementation of `_createRoot` (which creates and > returns the shadow root on the element) to return `this`, to achieve > rendering into the element's light DOM and forgo DOM & style encapsulation. > > Note that opting to do this means you lose child distribution via , > you expose the rendering to the outside world making it susceptible to > inadvertent styling and/or DOM manipulation, and it generally means the > component cannot be used inside an element that does encapsulate its > rendering using Shadow DOM, since global styles will not reach it. As > such, this is a choice that may be reasonable to make for app-specific > elements to deal with legacy global CSS, but should generally never be made > for reusable elements, since you lose all guarantees of reusability granted > by encapsulation and open back up a lot of the problems that web components > solve for making UI components reusable in any context. > > Hope that clears it up. > > Kevin > > > > > On Fri, Mar 9, 2018 at 8:09 AM Ronn Ross <ronn...@gmail.com > > wrote: > >> I see, but shouldn't this be a choice for the implementer? I can see uses >> both use cases. For my use case all the styles are global. Just for my >> understanding; It is impossible to see a style outside of a web component? >> If the answer is yes, then how does one keep from duplicating styles and >> attempt some reuse? >> >> On Friday, March 9, 2018 at 10:56:38 AM UTC-5, Karl Tiedt wrote: >>> >>> The whole point of Web Components is to prevent global styles from >>> infringing on your components... you would basically need to include the >>> CSS in every component similar to how the style-modules of 2.x did... >>> >>> -Karl Tiedt >>> >>> On Fri, Mar 9, 2018 at 8:34 AM, Ronn Ross <ronn...@gmail.com> wrote: >>> >>>> I guess I should clarify that I'm not talking about the need to create >>>> a style module. I pull tachyons in from a CDN in the html page. I am just >>>> looking for a way for the components to be able to see all those global >>>> styles. Thanks! >>>> >>>> On Friday, March 9, 2018 at 9:30:21 AM UTC-5, Ronn Ross wrote: >>>>> >>>>> Hi I'm using polymer 3, and lit-html. I am defining a set of >>>>> components and using Tachyons to style them. Tachyons is provided by the >>>>> page that loads the components. As of now my components do not by default >>>>> see the global styles. Is there a way to set them up to do so? >>>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>> --- >>>> You received this message because you are subscribed to the Google >>>> Groups "Polymer" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to polymer-dev...@googlegroups.com. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com >>>> >>>> <https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com?utm_medium=email_source=footer> >>>> . >>>> >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> &q
Re: [polymer-dev] Re: Allow components to use global CSS
I see, but shouldn't this be a choice for the implementer? I can see uses both use cases. For my use case all the styles are global. Just for my understanding; It is impossible to see a style outside of a web component? If the answer is yes, then how does one keep from duplicating styles and attempt some reuse? On Friday, March 9, 2018 at 10:56:38 AM UTC-5, Karl Tiedt wrote: > > The whole point of Web Components is to prevent global styles from > infringing on your components... you would basically need to include the > CSS in every component similar to how the style-modules of 2.x did... > > -Karl Tiedt > > On Fri, Mar 9, 2018 at 8:34 AM, Ronn Ross <ronn...@gmail.com > > wrote: > >> I guess I should clarify that I'm not talking about the need to create a >> style module. I pull tachyons in from a CDN in the html page. I am just >> looking for a way for the components to be able to see all those global >> styles. Thanks! >> >> On Friday, March 9, 2018 at 9:30:21 AM UTC-5, Ronn Ross wrote: >>> >>> Hi I'm using polymer 3, and lit-html. I am defining a set of components >>> and using Tachyons to style them. Tachyons is provided by the page that >>> loads the components. As of now my components do not by default see the >>> global styles. Is there a way to set them up to do so? >>> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to polymer-dev...@googlegroups.com . >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com?utm_medium=email_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/228b3eec-90a1-4ce2-982d-2b280543fa8b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Re: Allow components to use global CSS
I guess I should clarify that I'm not talking about the need to create a style module. I pull tachyons in from a CDN in the html page. I am just looking for a way for the components to be able to see all those global styles. Thanks! On Friday, March 9, 2018 at 9:30:21 AM UTC-5, Ronn Ross wrote: > > Hi I'm using polymer 3, and lit-html. I am defining a set of components > and using Tachyons to style them. Tachyons is provided by the page that > loads the components. As of now my components do not by default see the > global styles. Is there a way to set them up to do so? > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Child html within lit-html
Thanks everyone. I also read about slot on MDN and it makes sense. I saw
that chrome only supports this, so will this be covered by the polyfill in
other browsers?
On Monday, February 19, 2018 at 11:27:00 AM UTC-5, Justin Fagnani wrote:
>
> For projecting child content, you need to use s:
> https://developers.google.com/web/fundamentals/web-components/shadowdom#slots
>
> class MyButton extends LitElement {
> constructor(...args) {
> super();
> }
>
> render() {
> return html`
>
>
>
> `;
> }
> }
>
> On Mon, Feb 19, 2018 at 8:18 AM, Ronn Ross <ronn...@gmail.com
> > wrote:
>
>> I have a simple button component.
>>
>>
>> I trying to get the child content and pass it through to the button. Here
>> is an example:
>>
>>
>> this is some content
>>
>>
>> I can't figure out how MyButton can pass along the children
>>
>> class MyButton extends LitElement {
>> constructor(...args) {
>> super();
>> }
>>
>> render({children}) {
>> return html`
>>
>> ${children}
>>
>> `
>> }
>> }
>>
>>
>> I tried capturing all the args pass into render and the constructor, but
>> found nothing that I can use to capture the content. Can someone point me
>> in the right direction?
>>
>> Thanks!
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to polymer-dev...@googlegroups.com .
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com?utm_medium=email_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/e8a356c2-75db-4f40-a9ea-ca1ca67693a5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Child html within lit-html
I have a simple button component.
I trying to get the child content and pass it through to the button. Here
is an example:
this is some content
I can't figure out how MyButton can pass along the children
class MyButton extends LitElement {
constructor(...args) {
super();
}
render({children}) {
return html`
${children}
`
}
}
I tried capturing all the args pass into render and the constructor, but
found nothing that I can use to capture the content. Can someone point me
in the right direction?
Thanks!
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Adding dynamic css class using lit-html
I'm attempting to dynamically apply a css class using a property. For
example I want to pass in a string:
some stuff
My component looks like so:
class MyButton extends LitElement {
static get properties() {
return {
kind: String
}
}
constructor() {
super();
}
render({ kind }) {
return html`
.primary {
color: red;
}
Press Me!
`
}
}
When I hard-code the class on the element it works. Any ideas?
Thanks!
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/8f731c01-2f4d-470a-ac21-804d15050957%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [polymer-dev] Polymer 3 lit-html example
Justin,
That worked. Thanks for the quick response. Is ready() a special method? Do
you think lit-element will get long term support in polymer 3?
Thanks!
On Friday, February 16, 2018 at 2:32:48 PM UTC-5, Justin Fagnani wrote:
>
>
>
> On Fri, Feb 16, 2018 at 11:16 AM, Ronn Ross <ronn...@gmail.com
> > wrote:
>
>> Greetings,
>>
>> I'm attempting to create a small polymer 3 lit-html project. I'm getting
>> hung up when lit-html enters the picture. I followed this tutorial:
>>
>> https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview
>>
>> and was able to get the demo project running locally. Then I felt
>> inspired and imported lit-html and tried to convert it over. Here is what I
>> have
>>
>> import { Element as PolymerElement } from
>> '../node_modules/@polymer/polymer/polymer-element.js';
>> import { html, render} from '../node_modules/lit-html/lit-html.js';
>>
>> export class MyApp extends PolymerElement {
>>constructor() {
>>super();
>>this.name = '3.0 preview';
>>}
>>
>> static get properties() {
>>name: {
>>Type: String
>>}
>>}
>>static get template() {
>>return render(this.render());
>>}
>>
>> render() {
>>return html`
>>
>>This is my ${name} app.
>>
>>`;
>>}
>> }
>>
>> customElements.define('my-app', MyApp);
>>
>> When I run the app it goes from working to
>>
>> Uncaught TypeError: this.render is not a function
>>
>> Seems strange since it is a method on the class. I'm sure that I'm
>> missing something obvious. Could someone please point me in the right
>> direction?
>>
>
> The problem here is that `render()` is an instance method and you're
> trying to call it from a static method using `this`. You can't really use
> lit-html with the static template system that PolymerElement comes with.
> We've made a new base class called LitElement that includes the
> non-template parts of Polymer and adds lit-html integration:
> https://github.com/PolymerLabs/lit-element
>
>
>
>>
>> Thanks!
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to polymer-dev...@googlegroups.com .
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/9cb1b757-8752-4317-98f2-b68f2465ef1e%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/9cb1b757-8752-4317-98f2-b68f2465ef1e%40googlegroups.com?utm_medium=email_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/6d16b912-4c5a-4822-961d-ec13ea94de5d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[polymer-dev] Polymer 3 lit-html example
Greetings,
I'm attempting to create a small polymer 3 lit-html project. I'm getting
hung up when lit-html enters the picture. I followed this tutorial:
https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview
and was able to get the demo project running locally. Then I felt inspired
and imported lit-html and tried to convert it over. Here is what I have
import { Element as PolymerElement } from
'../node_modules/@polymer/polymer/polymer-element.js';
import { html, render} from '../node_modules/lit-html/lit-html.js';
export class MyApp extends PolymerElement {
constructor() {
super();
this.name = '3.0 preview';
}
static get properties() {
name: {
Type: String
}
}
static get template() {
return render(this.render());
}
render() {
return html`
This is my ${name} app.
`;
}
}
customElements.define('my-app', MyApp);
When I run the app it goes from working to
Uncaught TypeError: this.render is not a function
Seems strange since it is a method on the class. I'm sure that I'm missing
something obvious. Could someone please point me in the right direction?
Thanks!
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to polymer-dev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/9cb1b757-8752-4317-98f2-b68f2465ef1e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
