사용자 정의 HTML 요소-HTML 튜토리얼-php.cn

사용자 정의 HTML 요소

WBOY

풀어 주다： 2024-09-04 16:52:35

원래의

893명이 탐색했습니다.

다음 문서에서는 맞춤 HTML 요소에 대한 개요를 제공합니다. HTML에는 웹 구성 요소에 대한 많은 기능이 있습니다. 일부는 사용자 정의 또는 사용자 정의 HTML 요소를 생성하는 표준 기능을 가지고 있습니다. 이는 HTML 언어로 더 많은 기능을 제공하기 위해 웹 페이지를 캡슐화합니다. 더 많은 사용자 정의 웹 페이지 기능과 결합할 수 있는 중첩된 배치 요소 세트를 사용하면 시간이 오래 걸립니다. 일부 웹 브라우저는 Mozilla, Firefox, Google Chrome 및 Microsoft Edge 브라우저와 같은 사용자 정의 요소를 지원합니다. html 사용자 정의 요소, Safari 및 Opera에 대해 지원됩니다. 이러한 브라우저는 html 사용자 정의 요소와 호환되지 않습니다. 자율적인 사용자 정의 요소만 지원합니다.

구문:

javascript는 html에 새 태그를 도입하기 위한 세계화된 요소이기 때문에 맞춤 요소와 같은 새로운 html 요소를 정의하는 데 사용할 것입니다. 따라서 웹페이지 요소를 사용할 때 구문이 달라집니다.

Class sample extends HtmlElement
{
default constructor()
{
---some user defined codes---
}
}

로그인 후 복사

위 코드는 Java 기반의 샘플 코드입니다. 이는 맞춤형 요소를 생성하기 위한 일반적인 개요이며 변경 사항은 웹 페이지에 영향을 받습니다.

맞춤 HTML 요소는 어디에 사용하나요?

일반적으로 HTML 맞춤 요소에는 자율 맞춤 요소와 맞춤 내장 요소의 두 가지 유형이 포함됩니다. HTML로 사용자 정의 요소를 생성할 때마다 클래스와 해당 메서드, 속성 및 속성을 설명합니다. 일부 이벤트도 그렇게 호출됩니다. 사용자 정의 요소가 생성되고 HTML 요소, , 등과 같은 일부 요소로 내장 정의되면 HTML 언어에서 사용자 정의 요소를 사용할 수 있습니다.

자율 사용자 정의 요소에는 HtmlElement 클래스로 확장되는 사용자 정의 요소와 함께 모든 새로운 요소가 포함되어 있습니다. 그것은 Java 표준 규칙과 함께 제공됩니다. 또한 맞춤형 내장 요소는 내장 요소를 생성하여 자율적 맞춤형 요소에 맞춤형 요소를 생성합니다. 웹 페이지에 요소가 추가되거나 제거될 때마다 브라우저에 표시 방법을 알려줄 것입니다.

자율 커스텀 요소는 특별한 메소드가 있는 클래스를 사용하여 위의 시나리오를 만듭니다. 예를 들어, 일부 메소드는 "connectedCallback()"입니다. 이 메소드는 요소가 문서에 추가될 때마다 브라우저 호출에 사용됩니다. 또한 HTML 문서에 요소를 반복적으로 추가하거나 제거하면 여러 번 호출될 수 있습니다.” connectedCallback()” 이 메서드는 요소가 문서에서 제거될 때마다 브라우저를 호출합니다. 또한 HTML 문서에 요소를 반복적으로 추가하거나 제거할 때 여러 번 호출할 수도 있습니다.

observedAttributes()는 속성 중 하나가 나열되고 수정될 때 반영된 변경 사항을 모니터링하기 위해 속성 이름 배열을 반환하는 메서드 중 하나입니다.attributeChangedCallback(name,oldvalue,newvalue) 및 " 채택된Callback()”은 HTML 문서에서 해당 요소가 새 요소로 이동할 때마다 호출됩니다. 이제 html 요소를 사용한다고 가정해 보겠습니다. 이 경우에는 와 같은 태그가 있습니다. 태그를 사용하면 태그에는 javascript를 사용하여 인스턴스를 생성한 MyElement가 있습니다. 해당 인스턴스를 사용하여 위에서 언급한 메서드를 사용하여 필요한 메서드를 호출하고 javascript를 사용하여 웹 페이지에서 해당 기능을 사용합니다.

time>과 같은 일부 기본 태그를 사용하여 HTML에서 날짜 및 시간 계산을 사용한다고 가정합니다. 시간에 대한 태그 요소입니다. 하지만 해당 시간에는 자동으로 시간 형식이 지정되지 않습니다. connectCallback()과 같은 메소드를 사용할 것입니다. 이 메소드는 에 대해 호출하여 브라우저를 사용합니다. 옵션 및 요소가 페이지에 추가되거나 HTML 파서가 이를 감지하는 데 도움이 됩니다. 내장된 Intl.DateTimeFormat 옵션을 사용하는 dateFormatter는 전체 브라우저를 지원하므로 시간 형식으로 멋지게 표시하는 데 도움이 됩니다. 또한 customElements.define(태그 이름, 클래스 이름)에서 새 html 요소를 선언합니다. 이 형식은 스크립트에서 사용자 정의 요소를 생성하는 데 도움이 됩니다.

사용자 정의 요소를 생성한 후에는 PC의 시간 업데이트와 같이 전체 형식을 업그레이드해야 하지만 오류가 아니기 때문에 customElements.define 메소드의 html 요소가 스크립트에서 사용되지 않기 전에 업데이트됩니다. 요소는 비표준 HTML 태그라고 말하는 것처럼 알 수 없음으로 표시됩니다. 그런 다음 customElements.define 메서드가 호출된 후 :not(:define)과 같은 CSS 스타일 선택기를 사용하고 지원되는 시간 형식 옵션에서 새 인스턴스를 업그레이드합니다. connectCallback() 메서드도 호출되면 다음과 같이 됩니다. customElements.get(name),customElements.whenDefined(name)라는 메서드와 같은 정의된 상태 두 메서드 모두 이름을 인수로 반환합니다.

Examples of Custom Html Element

Different examples are mentioned below:

Example #1

<html>
<head>
<script>
class sample extends HTMLElement { // (1)
connectedCallback() {
let d = new Date(this.getAttribute('datetime') || Date.now());
this.innerHTML = new Intl.DateTimeFormat("default", {
month: this.getAttribute('month') || undefined,
day: this.getAttribute('day') || undefined,
year: this.getAttribute('year') || undefined,
minute: this.getAttribute('minute') || undefined,
hour: this.getAttribute('hour') || undefined,
timeZoneName: this.getAttribute('time-zone-name') || undefined,
second: this.getAttribute('second') || undefined,
}).format(d);
}
}
customElements.define("time-formatted", sample);
</script>
</head>
<time-formatted datetime="2020-02-19"
year="numeric" month="long" day="numeric"
hour="numeric" minute="numeric" second="numeric"
time-zone-name="long">
</time-formatted>
</html>

로그인 후 복사

Output:

사용자 정의 HTML 요소

Example #2

<html>
<head>
<script>
customElements.define('user-information', class extends HTMLElement {
connectedCallback() {
alert(this.innerHTML);
}
});
</script>
</head>
</html>
<user-information>Sivaraman</user-information>

로그인 후 복사

Output:

사용자 정의 HTML 요소

Example #3

<html>
<head>
<script>
class Example extends HTMLButtonElement {
constructor() {
super();
this.addEventListener('click', () => alert("User!"));
}
}
customElements.define('sample-button', Example, {extends: 'button'});
</script>
<button is="sample-button">Welcome</button>
<button is="sample-button" disabled>Disabled</button>
</head>
</html>

로그인 후 복사

Output:

사용자 정의 HTML 요소

The above three examples will discuss the custom elements in the html languages; In the first example, we already know about the time and date format output using custom tag elements; the second example shows a basic javascript function called after executing the custom elements in the html and final example will be discussed about the same javascript function while we are clicking the html custom tag elements.

Conclusion

The Web components have some processes for connecting with the technologies. It will be used to help the html for reusable purposes across the entire web.Html have the Dom components; it will be used for communicating the user-level data(including custom elements) through the web for data migration.

위 내용은 사용자 정의 HTML 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!