Re: [polymer-dev] Child html within lit-html

['Justin Fagnani' via Polymer]

Safari and Opera support Shadow DOM, Firefox has it under development. The
polyfills work, and lit-html has ShadyCSS integration as of 0.9.0.

On Feb 19, 2018 10:26 AM, "Ronn Ross"  wrote:

> 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  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/ms
>>> gid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com
>>> 
>>> .
>>> 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.
>

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/CAEKsHmDUZTZF3fRTL9xwadymoxVXjRNzEk2x2ppFy5GnyVLphQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

Re: [polymer-dev] Child html within lit-html

[Ronn Ross]

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  > 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
>>  
>> 
>> .
>> 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.

Re: [polymer-dev] Adding dynamic css class using lit-html

['Justin Fagnani' via Polymer]

Neither lit-html or LitElement really help here yet, because the host
element is not under control of its own template.

Right now using className or classList in render() is the best option.

render() {
  this.className = this.kind;
}

or if you have other classes you need to not disturb:

const kinds = ['primary', 'secondary'];
render() {
  kinds.forEach((k) => this.classList.toggle(k, this.kind === k));
}


On Mon, Feb 19, 2018 at 5:19 AM, Ronn Ross  wrote:

> 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;
> }
> 
>  class="${kind}"
> type="button">
> 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.
>

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/CAEKsHmA-nh7MUueeHGNf6P32ygm_aY_0gLN41s4S%3DLp8BnUKgg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

Re: [polymer-dev] Child html within lit-html

['Justin Fagnani' via Polymer]

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  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+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.
>

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/CAEKsHmAFqkbu3O%2BbUZaU2h5ZOn12JbCB%2BuNQD0yDgeJdwqPhzg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[polymer-dev] Child html within lit-html

[Ronn Ross]

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

[Ronn Ross]

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.