larsdenbakker / lit-html-examples Goto Github PK

View Code? Open in Web Editor NEW

132.0 12.0 18.0 193 KB

Examples for using the lit-html library and LitElement base class

HTML 16.81% JavaScript 83.19%

lit-html-examples's Introduction

This project has moved

This project has moved to: https://open-wc.org/developing/ please look there for up to date examples.

lit-html-examples's People

Contributors

Stargazers

Watchers

Forkers

dimon-durak mnixo thepassle lukiffer aadamsx area73 kosirm a73-inuit goprojectowner lucas-oliveira-sympla salmanthecoder varungupta2671 formyown chirag-1998 m00zi alpagor robharting

lit-html-examples's Issues

Add upwards data flow example

@font-face

Hey, thanks for your examples. They have been really helpful.

I'm stuck understanding one thing. If I want to inherit styles from a parent and remove the shadowDom.

For example:

_createRoot() {
return this;
}

I lose the ability to compose a component with slots. I'm not against having shadowed styles though, so alternatively how would you enable @font-face for a custom element

Why are tagnames prepended with x-

lit-html-examples/src/1-basic/10-repeat-templates.js

Line 59 in 66cb67b

customElements.define('x-repeat-templates', RepeatTemplates);

lit-html-examples/src/2-intermediate/08-conditional-templates.js

Line 47 in 66cb67b

customElements.define('x-conditional-templates', ConditionalTemplates);

lit-html-examples/src/1-basic/04-default-property.js

Line 28 in 66cb67b

customElements.define('x-default-property', DefaultProperty);

Is this just something random so the name doesn't overlap with another element with a similar name?

Add more examples

to use with pwa-helpers
to use redux
to use redux with localStorage

Conditional logic: `Bool ? 'str' : ''` can be simplified to `Bool && 'str'`

const message = 'hello friend';
const showMessage = true;

${showMessage
    ? html`The message is: ${message}`
    : ''}

// The above is the same as:

${showMessage && html`The message is ${message}`}

Run examples in online editors

It would be cool to run the examples in jsbin, codepen or something similar. That way people can more easily see them in action and fork them.

Ideally they'd be synced with the source code.

Add an example using polymer elements

Add routing example

The set-properties and the set-attribute examples are backwards?

https://lit-html.polymer-project.org/guide/writing-templates#bind-to-attributes says that expressions are bound to attributes by default, and the dot prefix binds to properties. Am I missing something?

Add an example using subclassing

Clarification on use of "."

Hi,

@ 1-basic/07-set-attributes.js you write:

  return html`
      <!--
        LitElement sets javascript properties by default. To set html attributes, prefix the the attribute
        with a '.'. It depends on the element you're rendering whether attributes or properties should be used.
        In this case the <a> element has a href attribute which we want to set.
        See set-properties example on how to set properties.
      -->
      <a .href="${this.href}">
        ${this.label}
      </a>

But
@ https://lit-element.polymer-project.org/guide/templates

Bind to an attribute
Bind prop2 to an attribute:

it mentions that

html`<div id="${this.prop2}"></div>`

id is a global attribute as well as href is an attribute of <a> element, isn't it?

On the other hand, a little bit further it mentions:

Bind to a property
Bind prop4 to a property:

html`<input type="checkbox" .value="${this.prop4}"/>`

but value is also an input attribute! Isn't it?

In addition,
@ 1-basic/06-set-properties.js you write:

...
          <input placeholder="${this.placeholder}">
...

     <x-custom-input
        helpText="${this.helpText}"
        placeholder="${this.placeholder}">
     </x-custom-input>
...

Although placeholder is an attribute you do not write .placeholder.

Moreover, shouldn't be:

     <x-custom-input
        .helpText="${this.helpText}"
        .placeholder="${this.placeholder}">
     </x-custom-input>

since both helpText and placeholder are properties of <x-custom-input> element.

Tia

Reflect property to attribute example is outdated

LitElement now supports property option called reflect, so instead of this whole method:

lit-html-examples/src/2-intermediate/12-reflect-property-to-attribute.js

Lines 24 to 56 in d4460db

    
             /** 
        
              * Sometimes it's useful to reflect js property values back to html attributes. 
        
              * This can be done from the update callback, which contains all 
        
              * property change information. 
        
              */ 
        
             update(changedProperties) { 
        
               // Make sure to call super, as this callback is used by LitElement as well. 
        
               super.update(changedProperties); 
        
               // In this case we are iterating over all properties and reflecting them. 
        
               Object.keys(this.constructor.properties).forEach((key) => { 
        
                 // Only update if property changed 
        
                 if (changedProperties.has(key)) { 
        
                   const value = changedProperties.get(key); 
        
                   if (value !== undefined) { 
        
                     this.setAttribute(key, value); 
        
                   } else { 
        
                     // Values are stringified as attributes. We don't like to see undefined 
        
                     // in the DOM, so we remove the attribute. 
        
                     this.removeAttribute(key); 
        
                   } 
        
                 } 
        
               }); 
        
               // Instead of reflect all properties all the time, you could implement a separate property 
        
               // to control which properties are reflected: 
        
               // this._reflectedProperties.forEach((key) => { 
        
               //   ... same as above 
        
               // }); 
        
             }

you could just set properties like so:

{ 
  count: { type: Number, reflect: true }
  message: { type: String }, 
}

I'd make a PR, but I'm not sure if this example is even needed anymore.

	/**
	* Sometimes it's useful to reflect js property values back to html attributes.
	* This can be done from the update callback, which contains all
	* property change information.
	*/
	update(changedProperties) {
	// Make sure to call super, as this callback is used by LitElement as well.
	super.update(changedProperties);

	// In this case we are iterating over all properties and reflecting them.
	Object.keys(this.constructor.properties).forEach((key) => {

	// Only update if property changed
	if (changedProperties.has(key)) {
	const value = changedProperties.get(key);

	if (value !== undefined) {
	this.setAttribute(key, value);
	} else {
	// Values are stringified as attributes. We don't like to see undefined
	// in the DOM, so we remove the attribute.
	this.removeAttribute(key);
	}
	}
	});

	// Instead of reflect all properties all the time, you could implement a separate property
	// to control which properties are reflected:

	// this._reflectedProperties.forEach((key) => {
	// ... same as above
	// });
	}