우리의 다중 선택 위젯은 다음과 같은 마크 업 구조를 갖습니다 : <code class="language-html"><x-multiselect placeholder="Select Item">
<li value="1" selected>Item 1</li>
<li value="2">Item 2</li>
<li value="3" selected>Item 3</li>
</x-multiselect></code>
요소는 <x-multiselect></x-multiselect> 속성을 사용합니다. 목록 항목 ()에는 placeholder 및 <li> 속성이 있습니다. 구성 요소는 선택한 값의 배열을 리턴하는 메소드를 노출시킵니다 (이 예에서는 value). 또한 선택 변경시 이벤트를 발사합니다. 목표는 최신 브라우저 호환성입니다
selected 템플릿 () : selectedItems()
구성 요소의 HTML, CSS 및 JavaScript는 에 있습니다. HTML 템플릿은 구성 요소의 구조를 정의합니다
[1, 3]
change 요소 삽입 호스트 요소에서 그림자 돔으로 요소.
구성 요소 생성 :
JavaScript는 사용자 정의 요소를 등록합니다 :
여기에는 템플릿을 찾아 에서 상속 된 프로토 타입을 만들고 multiselect.html (렌더링, 이벤트 처리, 속성 처리 및 스타일을 포함한 구성 요소 구현의 나머지 부분은 여기를 따릅니다. 길이 제약으로 인해 생략되지만 링크 된 GitHub 리포지토리에서 사용할 수 있습니다.)
브라우저 지원 및 폴리 플릴 :
웹 구성 요소는 최신 브라우저에서 우수한 지원을 제공하지만 와 같은 폴리 플릴은 모든 주요 브라우저에서 호환성을 보장합니다. 데모 페이지는 사용법을 보여주고 잠재적 인 폴리 필드 관련 문제를 해결합니다 ( 변형 및 섀도우 돔 스타일 처리).
multiselect.html 폴리머 및 X- 태그 :
중합체 및 X- 태그와 같은 프레임 워크는 웹 구성 요소 개발을 단순화하여 추가 기능을 제공하고 보일러 플레이트 코드를 줄입니다.
<code class="language-html"><template id="multiselectTemplate">
<style>
/* component styles */
</style>
<div class="multiselect">
<div class="multiselect-field"></div>
<div class="multiselect-popup">
<ul class="multiselect-list">
<content select="li"></content>
</ul>
</div>
</div>
</template></code> 결론 :
웹 구성 요소는 웹 개발을 크게 발전시킵니다. 이 튜토리얼은 기능적 다중 선택 구성 요소를 구축 하여이 기술의 힘과 이점을 강조합니다. 접근성 모범 사례를 위해 링크 된 "액세스 가능한 웹 구성 요소 만드는 방법"기사를 참조하십시오.
업데이트 12.05.2016 : 동반자 기사, "액세스 가능한 웹 구성 요소를 만드는 방법"은이 기사의 한계를 다룹니다. 완전히 이해하려면 둘 다 읽으십시오. 이 기사는 Ryan Lewis의 Peer Review의 혜택을 받았습니다. SitePoint의 동료 리뷰어 덕분에!