사용자 정의 태그를 만들어 HTML을 확장합니다

이 튜토리얼에서는 사용자 정의 태그로 HTML 언어를 확장하는 것이 얼마나 쉬운 지 보여 드리겠습니다. 사용자 정의 태그는 다양한 동작을 구현하는 데 사용될 수 있으므로 코드를 덜 작성하고 HTML 문서를 더 간단하게 유지하는 매우 편리한 방법입니다.

사용자 정의 태그로 더 나아가려면 그림자 돔으로 캡슐화 된 사용자 지정 태그를 작성하는 내 게시물을 확인하십시오. & lt; CodingDude-gravatar & gt;

. 이 사용자 정의 태그는 특정 이메일 주소에 대한 Gravatar 사진을 표시합니다.  wind 이를 통해 파서가 일반 요소를 사용자 정의 태그와 구별 할 수 있어야합니다.  사용자 정의 요소 태그 이름에는 항상 대시가 있어야합니다 (-)

2 단계 : 올바른 프로토 타입을 선택하십시오. 위의 코드는 다음과 같다 :

다른 HTML 요소를 확장하는 사용자 정의 요소를 만들려면 . HTML 요소의 모든 표준 규칙을 사용자 정의 요소에 인스턴스화하면 사용자 정의 요소에 적용됩니다. 표준 요소와 마찬가지로 JavaScript를 사용하여 DOM에서 사용자 정의 요소를 만들거나 HTML에서 선언 할 수 있습니다.

html에서 사용자 정의 요소를 선언합니다 :

javaScript를 사용하여 DOM에서 사용자 정의 요소 생성 :

a in a in a type extension 요소를 사용합니다. JavaScript를 사용하여 DOM의 확장 요소 :

마크 업을 추가하는 것은 사용자 정의 태그에서 다소 간단합니다. 우선 상위 HTML 요소를 확장하는 클래스를 만들어야합니다. 우리의 경우, 우리는 htmlelement 를 확장 할 것입니다. 우리는 사용자 정의 태그의 내부 텍스트 를 사용할 것입니다. 생성자 지점 내부에서 이것을 생성되는 사용자 정의 요소로 부르는 것을 잊지 마십시오. 여기에 우리의 구성 요소가 어떻게 보이는지에 대한 간단한 개요가 있습니다. 수명주기 방법

사용자 정의 태그에 마크 업을 추가하기 전에 사용자 정의 태그와 관련된 수명주기 메소드를 알고 있어야합니다. 4 개의 수명주기 콜백이 있습니다.

우리는 이미 ConnectedCallback을 사용하는 방법을 보았습니다. 요소가 문서에 추가 되 자마자이 점검이 이루어집니다. 사용자 정의 태그

를 사용하여 이메일 속성이 사용자 정의 태그에 설정되어 있으며 화면은 다음과 같습니다.

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

AttributeEchangedCallback aidrebiteChangedCallback에 나열된 모든 속성에 대해

를 해고 할 것입니다. 우리의 경우, 우리는 el.setAttribute ( 'email', 'newemail') 를 원할 것입니다. 사용자 정의 요소에서 브라우저는 브라우저가 마지막으로 생명체 메소드 목록에서 마지막으로 연결됩니다. 요소를 숨기십시오 (예 : htmlElement ,이 속성은 기본적으로 사용자 정의 요소에 존재합니다. 그러나 이러한 특성의 동작을 수정할 수 있습니다. 대부분의 경우 JavaScript 클래스의 Getters 및 Setter는 속성을 제어하는 ​​데 사용됩니다. 이 게시물에서 논의 된 모든 것은 다음 데모에서 실험 할 수 있습니다.

코드 펜에서 ddev (@divyaddev)의 펜 사용자 정의 태그를 참조하십시오.

결론

Hooray! 우리는 사용자 지정 요소를 만드는 방법에 대한 게시물의 끝에 왔습니다. 이제 사용자 정의 요소를 만들어 HTML 마크 업에서 사용할 수 있어야합니다. 시도해보십시오! 당신은 얼마나 많은 성과를 거둘 수 있는지를보고 놀랄 것입니다. 이것은 사용자 정의 요소의 작동 방식의 시작일뿐입니다. 이 분야에서 탐험하고 배우는 것이 훨씬 더 많습니다. 사용자 정의 요소 및 고급 개념에 대한 더 많은 게시물을 위해이 공간을 계속보십시오.

위 내용은 사용자 정의 태그를 만들어 HTML을 확장합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!