Internal styles

This is an internal only page to demonstrate the styling of our documentation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a link to another page or section. So is this.

This is bold. This is italic. This is bold italic.

1. This is the first item
2. This is the second item
   1. This is a nested item

• This is the first item
• This is the second item
  • This is a nested item

The component's render method can return anything that Lit can render. Typically, it returns a single TemplateResult object (the same type returned by the html tag function).

I'm just some code

import { LitElement, html, css, customElement } from 'lit-element';

@customElement('my-element');
class MyElement extends LitElement {
  static style = css`
    my-element #id .class [attr~="foo"] ::part(bar) {
      border: 1px solid blue;
    }
  `;

  render() {
    return html`
      Lorem ipsum ${value}!
      <button attribute="value"></button>
      <button attribute=${value}></button>
      <button .property=${value}></button>
      <button ?boolean=${value}></button>
      <button @event=${this.handler}></button>
    `;
  }
}

@customElement('my-element')
class MyElement {
  @property({attribute: false})
  foo;
}

class MyElement {
  static properties = {
    foo: {attribute: false}
  };
}
customElements.define('my-element', MyElement);