JavascriptLit-element
Javascript, Lit-element
Source
Edit
History

Javascript component

Javascript 형식 컴포넌트 기본적인 구조

1
2
3
4
5
6
7
8
9
10
11
import { LitElement, html } from 'lit-element';

export class MyElement extends LitElement {
  render() {
    return html`
      <p>My First JavaScript lit-element-component.</p>
    `; // ``백틱 사이에 html형식으로 리턴함
  }
}

customElements.define('my-element', MyElement); // 컴포넌트 이름 : <my-element>

내가 만든 컴포넌트 사용법(import)

1. HTML

1
2
3
4
5
6
7
<head>
  <script type="module" src="./my-element.js"></script>
  <!-- src="해당 컴포넌트 주소(위치)" -->
</head>
<body>
  <my-element></my-element>
</body>

2. Javascript

1
2
3
4
5
6
7
8
import './my-element1.js'; // ''사이 해당 컴포넌트 위치

---
  render() {
    return html`
      <my-element1></my-element1>
    `;
  }

자세히 보기