Svelte에서 웹 구성 요소를 만드는 방법
17908 단어 webcomponentssveltejavascript
코드를 작성하기 전에 웹 구성 요소가 무엇인지 봅시다.
웹 구성 요소 소개
웹 구성 요소는 웹 플랫폼 API 그룹으로 웹 및 웹 응용 프로그램에 사용할 새로운 사용자 정의, 재사용 및 봉인 가능한 HTML 태그를 만들 수 있습니다.사용자 정의 구성 요소와 작은 위젯은 웹 구성 요소 표준을 바탕으로 현대 브라우저에 적용되며 HTML과 호환되는 자바스크립트 라이브러리나 프레임워크와 함께 사용할 수 있습니다.
웹 구성 요소는 네 가지 주요 사양을 기반으로 합니다.
사용자 정의 요소
사용자 정의 요소는 자신의 전체 기능 DOM 요소를 구축하는 방법을 제공합니다.사용자 정의 요소를 정의함으로써 저자는 해석기가 어떻게 요소를 정확하게 구성하는지, 그리고 이런 요소가 변경에 어떻게 반응해야 하는지를 알려줄 수 있다.사용자 정의 요소는 프레임워크와 브라우저에서 공유할 수 있는 자신의 의미, 행위와 표시를 포함한다.
그림자 DOM
그림자 DOM 규범은 웹 구성 요소에서 봉인된 스타일과 태그를 사용하는 방법을 정의합니다.태그 구조, 스타일, 동작을 숨기고 페이지의 다른 코드와 분리하여 서로 다른 부분이 충돌하지 않도록 할 수 있습니다.
ES 모듈
ES 모듈 사양은 JS 문서의 포함 및 재사용을 표준, 모듈화 및 성능 기반으로 정의합니다.JavaScript 사양은 모듈의 구문과 처리 모델에서 호스트와 무관한 부분을 정의합니다.이 규범은 그 처리 모델의 나머지 부분을 정의한다. type 속성을'module'로 설정하는 script 요소 안내 모듈 시스템과 모듈을 어떻게 가져오고 해석하며 실행하는지
HTML 템플릿
HTML 템플릿 요소 사양은 페이지를 로드할 때 사용되지 않지만 나중에 실행할 때 실례화할 수 있는 태그 세그먼트를 선언하는 방법을 정의합니다.
웹 구성 요소 기술은 단독으로 사용할 수도 있고 공동으로 사용할 수도 있다.
웹 구성 요소를 어떻게 사용합니까?
웹 구성 요소를 사용하는 것은 매우 간단하다.예를 들어, 폴리머에서 방출된 네트 어셈블리 라이브러리에 있는 어셈블리(예: 다음 어셈블리)를 사용할 수 있습니다.
https://www.webcomponents.org/element/@polymer/paper-button
간단한 웹 페이지부터:
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
</head>
<body>
<h1>Test Page</h1>
<p>This is an example paragraph.</p>
</body>
</html>
<html>
<head>
<title>This is the title of the webpage!</title>
<script type="module" src="https://npm-demos.appspot.com/@polymer/[email protected]/paper-button.js?@polymer/[email protected]"></script>
</head>
<body>
<h1>Test Page</h1>
<p>This is an example paragraph.</p>
<paper-button raised class="indigo">button</paper-button>
</body>
</html>
무엇이 날씬합니까?
Svelte는 Rich Harris가 작성한 JavaScript 프레임워크입니다.소형 응용 프로그램은 프레임워크 참조를 포함하지 않습니다.
전통적인 프레임워크, 예를 들어 React, Vue 또는Angular는 대부분의 작업이 브라우저에서 이루어지고, Svelte는 이러한 작업을 컴파일 절차로 전환합니다. 이것은 응용 프로그램을 구축할 때 발생합니다.
Svelte는 DOM을 조작하기 위해 코드를 생성합니다. 이것은 클라이언트가 실행할 때 더 좋은 성능을 제공할 수 있습니다.
Svelte는 가상 DOM 확산 같은 기술을 사용하지 않고 코드를 작성하여 응용 프로그램의 상태가 바뀔 때 외과 수술을 통해 DOM을 업데이트합니다.
The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
- Introducing Svelte: Frameworks without the framework
간단하고 깜찍한 웹 응용 프로그램을 만드는 방법
새로운 날씬한 프로젝트를 만들려면 공식 템플릿https://github.com/sveltejs/template부터 시작할 수 있습니다.
my svelte 프로젝트 디렉터리에 새 프로젝트를 만들고 의존 항목을 설치하고 서버를 시작하려면 다음 명령을 입력하십시오.
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev
이 예에서, 우리는 파일 프로그램의 내용을 복사할 수 있는 시계 구성 요소를 만들 것입니다.이 링크에서 온 svelte: https://svelte.dev/examples#clock.
사용자 정의 요소로 컴파일 (웹 구성 요소라고도 함)
customElement:true 컴파일러 옵션을 사용하여 슬림한 구성 요소를 사용자 정의 요소로 컴파일할 수도 있습니다. (웹 구성 요소라고도 함)구성 요소에 태그 이름을 지정하려면 svelte:options 요소를 사용해야 합니다.
<svelte:options tag="my-element">
사용자 정의 요소를 구성하려면 다음을 수행해야 합니다.
plugins: [
svelte({
customElement: true,
<svelte:options tag="svelte-clock">
svelte plugin: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/
웹 구성 요소가 준비되면, 우리는'npmrunbuild'를 실행할 수 있습니다. 이것은public/bundle에서 맞춤형 요소의 소형화, 생산 준비 버전을 컴파일합니다.js 파일.
컴파일러는 그림자 DOM 생성, 속성 적용 및 사용자 정의 요소 정의를 담당합니다.
생성된 웹 구성 요소를 테스트하기 위해 http 서버를 사용할 수 있습니다.
설치하려면 다음 명령을 수행할 수 있습니다.
npm install http-server -g
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<script src="bundle.js"></script>
</head>
<body>
<h1>Test Page</h1>
<p>This is an example paragraph.</p>
<svelte-clock/>
</body>
</html>
> http-server -p 8080 -c-1 public/
Starting up http-server, serving public/
Available on:
http://127.0.0.1:8080
섬세한 웹 구성 요소:결론
속성
사용자 정의 요소가 수락한 모든 도구는 컴파일할 때 자동으로 요소 속성으로 변환됩니다.소문자 속성 이름을 계속 사용하는 것을 권장합니다. 왜냐하면 camelCase나 PascalCase 등의 명칭 약정은 HTML에서 작용하지 않기 때문입니다.
테스트를 진행하기 위해서, 우리는 사용자 정의 요소에 간단한 속성을 추가할 수 있다.
<script>
...
export let clocktitle = "Svelte Clock"
...
</script>
...
<h1>{clocktitle}</h1>
...
<svelte-clock clocktitle="My Clock"></svelte-clock>
이벤트
웹 구성 요소로 포장된 Svelte 3에서 보내는 사용자 정의 이벤트는 일반 DOM 이벤트처럼 웹 구성 요소 자체에 거품이 생기지 않습니다. (기본적으로 사용자 정의 이벤트는 음영 DOM의 경계를 초과하지 않습니다.) 템플릿에서 일반적인 방식으로 처리할 수 없습니다.
<svelte-clock custom-event="handler()">
이벤트는 사용자 정의 요소로 컴파일된 구성 요소에서 실행되지 않습니다.
#3119
vogloblinsky
발표 날짜
customevent에서 이벤트를 탐지하는 이 컴퓨터의 Svelte 문법은 사용자 정의 요소로 내보내는 Svelte 구성 요소 스케줄링 이벤트에 적용되지 않습니다.
이 가능하다, ~할 수 있다,...https://github.com/sveltejs/svelte/blob/a0e0f0125aa554b3f79b0980922744ee11857069/src/runtime/internal/Component.ts#L162-L171
이것은 복제 라이브러리입니다.
https://github.com/vogloblinsky/svelte-3-wc-debug
날씬하다
예는 간결한 문법만 사용했다.내부 구성 요소 스케줄링 사용자 정의 이벤트'메시지'응용 프로그램 구성 요소는 on:message로 듣기
얘가 작용했어!//Inner.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
console.log('sayHello in child: ', 'Hello!');
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
//App.svelte
<script>
import Inner from './Inner.svelte';
function handleMessage(event) {
console.log('handleMessage in parent: ', event.detail.text);
}
</script>
<Inner on:message={handleMessage}/>
날씬하다
예는 단순 구문만 사용하고 웹 구성 요소로 구성 요소를 내보냅니다.내부 구성 요소 스케줄링 사용자 정의 이벤트'메시지'응용 프로그램 구성 요소는 on:message로 듣기
같은 문법은 작용하지 않는다.//Inner.svelte
<svelte:options tag="inner-btn"/>
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
console.log('sayHello in child: ', 'Hello!');
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
//App.svelte
<svelte:options tag="my-app" />
<script>
import Inner from './Inner.svelte';
function handleMessage(event) {
console.log('handleMessage in parent: ', event.detail.text);
}
</script>
<inner-btn on:message={handleMessage}/>
Vanilla JS는 공용/색인에서 잘 작동합니다.htmlconst button = document
.querySelector('my-app')
.shadowRoot.querySelector('inner-btn');
button.$on('message', e => {
console.log('handleMessage in page');
});
View on GitHub
shadowDom의 경계를 뛰어넘기 위해서는 v2 문서에서 언급한 것과 같은 사용자 정의 이벤트를 만들어야 합니다.CustomEventapi를 사용하여 Svelte 구성 요소에 사용자 정의 이벤트를 만들 수 있습니다.사용자 정의 이벤트를 정의하면 이 함수를 호출해서 이 이벤트를 스케줄링할 수 있습니다.dispatchEvent(이벤트)는 구성 요소의 변경 사항에 응답합니다.
라이프 사이클 방법에 응답하기 위해 사용자 정의 이벤트를 스케줄링할 수 없습니다.예를 들어 onMount 생명주기 방법에서 사용자 정의 이벤트를 스케줄링하려고 하면 이벤트를 스케줄링하지 않습니다.
이벤트를 추가하려면 다음과 같은 버튼을 추가할 수 있습니다.
<button on:click="{dispatchSavedDateEvent}">Save Date</button>
를 클릭하면 사용자 지정 이벤트를 보낼 수 있습니다.
function dispatchSavedDateEvent(e) {
console.log("[dispatchSecondIsElapsedEvent] time: ", time);
// 1. Create the custom event.
const event = new CustomEvent("savedData", {
detail: time,
bubbles: true,
cancelable: true,
composed: true // makes the event jump shadow DOM boundary
});
// 2. Dispatch the custom event.
this.dispatchEvent(event);
}
이벤트 인터페이스의 읽기 전용 조합 속성은 이벤트를 그림자 DOM 경계를 넘어 표준 DOM으로 전파할지 여부를 나타내는 부울 값을 반환합니다.
또 다른 방법은createEventDispatcher를 이용하는 거예요.
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
...
dispatch('second', {
text: '10 seconds elapsed!'
});
...
색인에 있습니다.html 우리는 다음과 같은 방식으로 새로운 이벤트를 구독해야 한다.
document.querySelector('svelte-clock')
.$on('second', (e) => { console.log("[index.html][second]", e)})
수입하다
가늘고 긴 구성 요소를 가져오려면 모든 중첩 요소를 표시로 설명해야 합니다
<svelte:option tag="my-nested-element”>
서브어셈블리를 사용자 정의 요소로 선언하면 소비자도 이러한 요소를 사용할 수 있습니다.
중첩 요소는 상위 요소와 동일한 섀도우 DOM을 사용하므로 중첩 요소의 섀도우 DOM 모드를 닫기로 설정할 수 없습니다.
슬림한 사용의 주요 장점.웹 구성 요소를 만드는 데 사용되는 js는 최종 구성 요소의 차원이 매우 작습니다.우리의 작은 예시에서 웹 구성 요소는 묶음 패키지에 묶여 있다.js는 7170바이트만 있고 다른 프레임워크에서 만든 웹 구성 요소에 비해 크기가 작아서 브라우저의 실행 속도가 수십 배 빠릅니다.
Reference
이 문제에 관하여(Svelte에서 웹 구성 요소를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
//Inner.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
console.log('sayHello in child: ', 'Hello!');
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
//App.svelte
<script>
import Inner from './Inner.svelte';
function handleMessage(event) {
console.log('handleMessage in parent: ', event.detail.text);
}
</script>
<Inner on:message={handleMessage}/>
//Inner.svelte
<svelte:options tag="inner-btn"/>
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
console.log('sayHello in child: ', 'Hello!');
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
//App.svelte
<svelte:options tag="my-app" />
<script>
import Inner from './Inner.svelte';
function handleMessage(event) {
console.log('handleMessage in parent: ', event.detail.text);
}
</script>
<inner-btn on:message={handleMessage}/>
const button = document
.querySelector('my-app')
.shadowRoot.querySelector('inner-btn');
button.$on('message', e => {
console.log('handleMessage in page');
});
<button on:click="{dispatchSavedDateEvent}">Save Date</button>
function dispatchSavedDateEvent(e) {
console.log("[dispatchSecondIsElapsedEvent] time: ", time);
// 1. Create the custom event.
const event = new CustomEvent("savedData", {
detail: time,
bubbles: true,
cancelable: true,
composed: true // makes the event jump shadow DOM boundary
});
// 2. Dispatch the custom event.
this.dispatchEvent(event);
}
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
...
dispatch('second', {
text: '10 seconds elapsed!'
});
...
document.querySelector('svelte-clock')
.$on('second', (e) => { console.log("[index.html][second]", e)})
<svelte:option tag="my-nested-element”>
Reference
이 문제에 관하여(Svelte에서 웹 구성 요소를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
