xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Google Lit Web Components library All In One

Google Lit Web Components library All In One

Lit is a simple library for building fast, lightweight web components.

Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。

lit

https://lit.dev/

https://lit.dev/docs/getting-started/

https://github.com/lit/lit/

https://lit.dev/tutorials/

https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg

demo

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    const result = html`<p>Hello, ${this.name}!</p>`;
    console.log('result =', result);
    // {strings, values, _$litType$}
    return result; 
  }
}
customElements.define('simple-greeting', SimpleGreeting);



<!DOCTYPE html>
<head>
  <script type="module" src="./simple-greeting.js"></script>
</head>
<body>
  <simple-greeting name="World"></simple-greeting>
</body>

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUdyZWV0aW5nIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgcCB7IGNvbG9yOiBibHVlIH1gO1xuXG4gIHN0YXRpYyBwcm9wZXJ0aWVzID0ge1xuICAgIG5hbWU6IHt0eXBlOiBTdHJpbmd9LFxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5uYW1lID0gJ1NvbWVib2R5JztcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCByZXN1bHQgPSBodG1sYDxwPkhlbGxvLCAke3RoaXMubmFtZX0hPC9wPmA7XG4gICAgY29uc29sZS5sb2coJ3Jlc3VsdCA9JywgcmVzdWx0KTtcbiAgICAvLyB7c3RyaW5ncywgdmFsdWVzLCBfJGxpdFR5cGUkfVxuICAgIHJldHVybiByZXN1bHQ7IFxuICB9XG59XG5jdXN0b21FbGVtZW50cy5kZWZpbmUoJ3NpbXBsZS1ncmVldGluZycsIFNpbXBsZUdyZWV0aW5nKTtcbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8c2ltcGxlLWdyZWV0aW5nIG5hbWU9XCJXb3JsZFwiPjwvc2ltcGxlLWdyZWV0aW5nPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

TypeScript & @decorators

TypeScript 修饰器实现原理 / TypeScript @decorator under the hood


import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}



import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Web Components

  1. Custom elements
    A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.

  2. Shadow DOM
    A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
    In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.

  3. HTML templates
    The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page.
    These can then be reused multiple times as the basis of a custom element's structure.

refs

https://developer.mozilla.org/en-US/docs/Web/Web_Components

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2022-03-19 12:44  xgqfrms  阅读(423)  评论(3)  编辑  收藏  举报