X- 태그로 사용자 정의 웹 구성 요소 구축-CSS 튜토리얼-php.cn

예, X- 태그는 JavaScript 라이브러리 또는 프레임 워크와 함께 사용하도록 설계되었습니다. 제한이나 특정 건축 패턴을 부과하지 않으므로 기존 프로젝트에 쉽게 통합 할 수 있습니다. jQuery, React, Angular 또는 Vue.js를 사용하든 X-Tag를 사용하여 응용 프로그램에서 재사용 할 수있는 사용자 정의 요소를 만들 수 있습니다.

생성 : function () {}

집

웹 프론트엔드

CSS 튜토리얼

X- 태그로 사용자 정의 웹 구성 요소 구축

Christopher Nolan

Feb 23, 2025 am 08:26 AM

Building Custom Web Components with X-Tag

X- 태그로 사용자 정의 웹 구성 요소 구축 키 테이크 아웃

Microsoft가 지원하는 JavaScript 라이브러리 인 X-Tag는 빠른 웹 구성 요소 개발을위한 작고 기능이 풍부한 인터페이스를 제공하며, 주로 사용자 정의 요소 API에 중점을 둡니다. x- 태그는 원래 모질라 프로젝트 이었지만 이제는 Google이 폴리머 프레임 워크를 뒷받침하는 방식과 유사한 Microsoft 지원 프로젝트입니다. x-tag로 사용자 정의 요소를 만드는 것은 xtag.register () 메소드를 사용하여 완전히 JavaScript 중심입니다. 이 프로세스는 사용자 정의 요소의 라이프 사이클, 액세서, 방법 및 이벤트를 정의하는 것이 포함됩니다. x-tag는 중합체와 비교하여 사용자 정의 요소를 구현하기위한 간단한 API를 제공하므로 설정을 가볍고 유연하게 유지하려는 개발자에게 적합한 선택이됩니다. 그러나 폴리머가하는 복잡한 기능은 제공되지 않습니다.

Google과 Mozilla의 웹 구성 요소 솔루션 이후, 이제 X-Tag 라이브러리 공개 릴리스로 Microsoft 가이 공간에 들어갈 차례입니다. 공식 웹 사이트는 다음과 같이 정의합니다

x-tag는 W3C 표준 웹 구성 요소 API 제품군을 랩핑하여 빠른 구성 요소 개발을위한 컴팩트 한 기능이 풍부한 인터페이스를 제공하는 Microsoft 지원 오픈 소스 JavaScript 라이브러리입니다. X-Tag는 모든 웹 구성 요소 API (사용자 정의 요소, Shadow Dom, Templates 및 HTML 가져 오기)에 대한 기능 후크를 제공하지만 작동하려면 사용자 지정 요소 지원 만 필요합니다. 기본 사용자 정의 요소 지원이 없으면 X-Tag는 Google의 폴리머 프레임 워크와 공유하는 일련의 폴리 플릴을 사용합니다.

다시 말해서, X- 태그는 Microsoft에게 Google에 폴리머가 있는지입니다. 두 사람 모두에게 공통적 인 유일한 것은 지원하지 않는 브라우저에서 웹 구성 요소를 지원할 수있는 기본 폴리 필드입니다. X- 태그는 중합체와 어떻게 다릅니 까?

폴리머는 4 가지 웹 구성 요소 기술, 즉 HTML 가져 오기, 사용자 정의 요소, Shadow Dom 및 HTML 템플릿을 단일 패키지로 결합합니다. 사용자 지정 웹 구성 요소를 구축하기위한 사용하기 쉬운 API를 개발자에게 제공합니다. 반면에 X-Tag는 사용자 정의 요소 API 만 제공하여 사용자 정의 웹 구성 요소를 구축합니다. 물론 X-Tag 라이브러리와 함께 다른 웹 구성 요소 API를 사용할 수도 있습니다. 는 X- 태그가 아니고 모질라 프로젝트가 아닌가? 그렇습니다. 그러나 지금은 더 이상 그렇지 않습니다. 파기 후, 나는 X-Tag 프로젝트의 최초 개발자 인 Daniel Buchner가 도서관을 만들 때 Mozilla에서 일하는 데 사용된다는 것을 알게되었습니다. 그러나 그 이후로 그는 Microsoft로 이사하여 프로젝트를 계속했습니다. 또한, 그는 전 모조 실 사람의 도움을 받아 도서관의 유일한 기여자였습니다. 따라서 이제는 전 모조 실리안이 설립 한 Microsoft 지원 프로젝트입니다. x- 태그 로 시작하는 것 이 기사에서는 다음 마크 업을 사용하여 Google지도 거리보기를 포함하기 위해 X-Tag 라이브러리를 사용하여 사용자 정의 요소를 작성합니다.

사용자 정의 요소는 위치의 좌표를 지정하기 위해 위도와 경도의 두 가지 속성을 갖습니다. 이러한 속성은 선택 사항이므로 개발자가 마크 업에서이를 정의하지 못하는 경우 각각의 기본값을 지정합니다. 문서의 에 X-Tag JavaScript 라이브러리를 포함 시켜서 시작하겠습니다.

문서의 에 x-tag 라이브러리를 포함시키는 것이 중요합니다. 렌더링 엔진이 내부에서 사용할 사용자 지정 요소 마크 업이 발생하기 전에 완전히 다운로드 및 구문 분석됩니다.

사용자 지정 요소 정의 폴리머와 달리 X- 태그로 사용자 지정 요소를 만드는 프로세스는 완전히 JavaScript 중심입니다. X-Tag 라이브러리는 유용한 방법, 콜백 및 속성을 제공하여 요소의 사용자 정의 동작을 정의합니다. x- 태그로 사용자 정의 요소를 만드는 일반적인 골격은 다음과 같습니다.

<span><span><span><google-map</span> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></span><span><span></google-map</span>></span></span>

로그인 후 복사

register () - 라이브러리에서 가장 중요한 방법입니다. 사용자 정의 요소의 이름을 첫 번째 인수 다음 객체 정의로 받아들입니다. 이름에서 알 수 있듯이 이것은 DOM에 사용자 정의 요소를 등록 할 책임이 있습니다. 컨텐츠 - 사용자 정의 요소는 구조 또는 프리젠 테이션을 위해 추가 마크 업이 필요할 수 있습니다. 이것은 마크 업을 DOM에 주입하기 위해 HTML 문자열 또는 멀티 라인 주석 문자열을 수용합니다. 라이프 사이클 - 사용자 정의 요소의 수명주기에서 다른 스테이지를 타겟팅하도록 설계된 유용한 콜백 메소드가 포함되어 있습니다. 액세서 - 이는 객체 속성, 세터 및 getter에 액세스하기위한 공통 인터페이스를 제공하고 해당 HTML 속성과 연결합니다. 속성이 getter/setter에 연결되면 해당 상태는 항상 동기화됩니다. 방법 - 사용자 정의 요소는 원하는 기능을 제공하기 위해 고유 한 고유 한 방법이 필요할 수 있습니다. 메소드 객체를 최상위 수준 XTAG.register () 정의 객체에 추가하고 그 안에 모든 사용자 정의 메소드를 포함하십시오. 이벤트 - 이벤트를 사용자 정의 요소에 첨부하는 일을 담당합니다. 이 개체의 키는 탭, 포커스 등과 같은 사용자 정의 요소에 첨부하려는 이벤트의 이름입니다.

기본 아이디어는 iframe을 사용하여 Google지도를 포함시키고 다음 형식으로 SRC URL을 지정하는 것입니다.

api_key를 얻으려면 여기에 설명 된 단계를 따르십시오. API_Key가 있으면 LifeCycle 객체의 생성 된 콜백 메소드 내부에 iframe을 생성하고 위 형식으로 SRC 속성을 지정합니다.

<span><span><span><google-map</span> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></span><span><span></google-map</span>></span></span>

로그인 후 복사

위의 코드는 작동하지만 iframe.src의 하드 코딩 된 좌표 값을 제거하고 대신 사용자 정의 요소 속성에서 직접 값을 소지해야합니다. 이를 위해, 우리는 키를 형성하는 속성 이름과 함께 액세서 객체를 사용합니다. 우리는 속성을 선언하여 html 속성과 연결합니다.

그런 다음 SRC URL을 지정 하면서이 변수를 직접 사용할 수 있습니다.

마무리 터치 적용 스타일링 사용자 정의 요소는 다른 HTML 태그 스타일링과 유사합니다. 클래스, ID 및 속성 선택기는 사용자 정의 요소와 함께 예상대로 작동합니다. 예를 들어, 우리는 새로 생성 된 사용자 정의 요소에 박스 쉐이더와 국경 래디 디스를 추가합니다.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script</span> src<span>="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

로그인 후 복사

사용자 정의 요소를 사용하는 것은 이제 에 다음 마크 업을 포함하는 것만 큼 간단합니다.

최종 결과는 아래 코드 펜에서 볼 수 있습니다 Codepen에서 sitepoint (@SitePoint)의 X-TAG

사용자 정의 요소 xtag.register('google-map', { content: '', lifecycle: { created : function(){ /* Called when the custom element is created */ }, inserted : function(){ /* Called when the custom element is inserted into the DOM */ }, removed : function(){ /* Called when the custom element is removed from the DOM */ }, attributeChanged: function(attrName, oldValue, newValue){ /* Called when the attribute of the custom element is changed */ } }, accessors : {}, methods : {}, events : {} }); 참조. 웹 구성 요소에 대한 브라우저 지원은 약간 스케치이지만, 폴리 필이있는 X-Tag 라이브러리를 사용하는 데모는 IE9 이상을 포함한 모든 최신 브라우저에서 작동해야합니다.

최종 생각 중합체와 비교할 때 X- 태그는 중합체의 복잡한 특징이 부족하기 때문에 사용자 정의 요소를 이해하고 구현하기위한 훨씬 간단한 API를 제공합니다. 설정을 밝게 유지하고 유연하게 유지하려고하고 다른 웹 구성 요소 API에 대한 사용 사례가 없다면 X- 태그는 작업에 적합한 후보 인 것으로 보입니다.

. x-tag 로 사용자 정의 웹 구성 요소 구축에 대한 자주 묻는 질문 (FAQ) X-Tag 란 무엇이며 웹 개발에서 중요한 이유는 무엇입니까?

X- 태그는 맞춤형, 재사용 가능한 HTML 요소의 생성을 단순화하는 작은 JavaScript 라이브러리입니다. Shadow Dom, HTML 템플릿 및 사용자 정의 요소도 포함하는 Web Components Suite of Technologies의 일부입니다. X- 태그는 개발자가 자신의 HTML 요소를 만들고 코드를 캡슐화하며 코드베이스를 깨끗하고 유지 관리 할 수 있도록 할 수 있기 때문에 웹 개발에서 중요합니다. 또한 코드 재사용을 촉진하는데, 이는 개발 프로세스의 속도를 크게 높일 수 있습니다.

X- 태그는 다른 웹 구성 요소 라이브러리와 어떻게 다른가요?

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><API_KEY</span>></span>&location=<span><span><LATITUDE</span>></span>,<span><span><LONGITUDE</span>></span></span>

로그인 후 복사

x- 태그는 단순성과 용이성에서 독특합니다. 사용. 다른 라이브러리와 달리 X-Tag에는 빌드 단계 나 변환이 필요하지 않으며 발자국이 매우 작습니다. 또한 간단하고 직관적 인 API가있어 사용자 정의 요소와 동작을 쉽게 정의 할 수 있습니다. 또한 X-Tag는 모든 최신 브라우저와 호환되며 다른 라이브러리 및 프레임 워크와 함께 사용할 수 있습니다. 다른 JavaScript 라이브러리 또는 프레임 워크와 함께 X- 태그를 사용할 수 있습니까?

예, X- 태그는 JavaScript 라이브러리 또는 프레임 워크와 함께 사용하도록 설계되었습니다. 제한이나 특정 건축 패턴을 부과하지 않으므로 기존 프로젝트에 쉽게 통합 할 수 있습니다. jQuery, React, Angular 또는 Vue.js를 사용하든 X-Tag를 사용하여 응용 프로그램에서 재사용 할 수있는 사용자 정의 요소를 만들 수 있습니다.

x-로 사용자 정의 요소를 정의하는 방법 X- 태그로 사용자 정의 요소를 정의하는 태그?

태그는 간단합니다. 사용자 정의 요소의 이름과 동작을 정의하는 객체를 전달하는 xtag.register 함수를 호출합니다. 이 개체에는 수명주기 방법, 액세서 및 이벤트 처리기가 포함될 수 있습니다. 기본 예는 다음과 같습니다.

xtag.register ( 'my-element', { lifecycle : {

생성 : function () {}

}
});

x- 태그의 수명주기 방법은 무엇입니까? 수명주기 방법은 사용자 정의 요소 수명의 다른 단계에서 호출되는 특별한 방법입니다. X- 태그는 4 가지 수명주기 방법을 지원합니다 : 생성, 삽입, 제거 및 속성. 이 방법은 요소가 생성되거나 DOM에 추가되거나 DOM에서 제거되거나 속성 중 하나가 변경 될 때 특정 작업을 수행 할 수 있습니다.

X- 태그로 이벤트를 어떻게 처리합니까?
x-tag는 사용자 정의 요소의 이벤트를 처리하는 간단한 방법을 제공합니다. 요소를 등록 할 때 이벤트 개체에서 이벤트 처리기를 정의 할 수 있습니다. 예를 들어, 클릭 이벤트를 처리하려면 다음과 같은 작업을 수행합니다. 🎜> console.log ( '요소 클릭!'); }

x- 태그를 사용하여 그림자 dom을 만들 수 있습니까? 요소?

예, X- 태그는 Shadow Dom 요소의 생성을 지원합니다. 이를 통해 요소의 스타일과 마크 업을 캡슐화하여 나머지 문서와 별도로 유지할 수 있습니다. 섀도우 루트를 만들려면 요소의 생성 된 수명주기 메소드 내부에서 this.createShadowRoot () 메소드를 사용할 수 있습니다.

사용자 정의 요소를 어떻게 스타일링 하는가?