다른 컨텍스트에 대한 웹 구성 요소 만들기

이 기사는 웹 구성 요소를 구축하는 방법에 관한 것이 아니며, Caleb Williams는 최근 상세한 안내서를 작성했습니다. 사용 방법, 구축 할 때 어떤 요소를 고려해야하는지, 프로젝트에서 효과적으로 활용하는 방법에 대해 논의합시다.

웹 구성 요소를 처음 접한다면 Caleb 's Guide는 읽을 가치가 있지만 빠르게 시작하는 데 도움이되는 몇 가지 리소스가 있습니다.

• 웹 구성 요소 - "올바른"접근 방식
• Shadow Dom V1 : 자체 포함 된 웹 구성 요소
• MDN의 웹 구성 요소
• 멋진 웹 구성 요소
• 권장 오픈 웹 구성 요소

웹 구성 요소가 현재 널리 지원되는 (무대 뒤에서 많은 노력 덕분에) Edge가 곧 Chromium 플랫폼으로 전환 될 것이라는 점을 고려할 때 사람들은 이제 웹 구성 요소가 "기본"및 플랫폼 호환 방법으로, 재사용 가능한 UI 구성 요소를 구축하여 디자인 시스템과 웹 프로젝트 간의 일관성을 유지하는 동시에 그림자 돔의 힘을 활용하여 구성 요소 자체의 역할을 캡슐화합니다.

이것은 옳고 그름입니다. 그러나 먼저, 추상 레이어 삼각형을 살펴 보겠습니다.

추상 레이어 삼각형

기술적으로, 우리는 웹 구성 요소를 좋아하는 마크 업 언어 HTML (예!)의 확장으로 간주해야합니다. 웹 구성 요소 API를 사용하면 HTML에 존재하지 않는 사용자 정의 HTML 요소를 만들 수 있습니다 (예 :<foo-bar></foo-bar> ).

일부는 웹 구성 요소가 기본적으로 새로운 HTML 요소이므로 HTML 사양의 일부로 고려해야하므로 패러다임, 핵심 개념 및 사용을 따라야합니다. 이러한 모든 점을 가정하면 구성 요소가 HTML, CSS 및 JavaScript와 나란히 웹 플랫폼 스택의 가장 낮은 수준에 존재한다는 것을 알게 될 것입니다. 프레임 워크 및 라이브러리 (예 : React, Vue, Angular, Sveltejs)는 추상화 레이어에서 작동하고 Stenciljs, Hybrids 및 Lit과 같은 "중간 지구"에있는 다른 도구 위에 앉아 있습니다. 이러한 추상화 계층 아래에서 기본 웹 기술과 기본 웹 구성 요소를 찾을 수 있습니다. 우리는 ALT ( Abstraction La Ayer T Riangle) 다이어그램을 사용 하여이 개념을 표현할 수 있습니다.

이것이 중요한 이유는 무엇입니까? 기본 구성 요소 위에 존재하는 레이어를 시각화하고 사용 환경을 이해하여 의도 한 환경에 대해 구축 할 수 있도록 도와줍니다. 환경은 무엇입니까? 그것이 우리의 목표입니다.

동일한 기술, 다른 환경

Shadow Dom은 웹 구성 요소 API의 핵심 요소입니다. 이를 통해 JavaScript와 CSS를 사용자 지정 요소로 묶을 수있어 외부 간섭 및 스타일 작동을 명시 적으로 허용하지 않는 한 방지 할 수 있습니다. 개발자는 실제로 외부 CSS가 Shadow Root 및 구성 요소로 누출되도록하는 몇 가지 방법을 따라 사용자 정의 속성 및 :: part 및 :: Theme Pseudo elements를 포함하여 구성 요소로 누출 될 수 있습니다.

고려해야 할 또 다른 사항 : 우리가 사용하는 환경. 웹 구성 요소를 개인적으로 구축 한 지 3 년 후, 개인 환경 (예 : 디자인 시스템)과 표준 환경 (예 : 일반 HTML, CSS 및 사용자 지정 스타일이없는 JavaScript)의 두 가지 환경을 식별 할 수 있습니다.

구성 요소를 설계하기 전에 사용 방법을 이해해야하므로 환경 유형을 결정하는 것이이 모든 것의 핵심입니다. 가장 쉬운 방법은 하나의 환경 만 타겟팅하는 것이지만 작은 CSS 트릭을 사용하면 두 가지 구성 요소를 모두 구축 할 수 있습니다.

더 깊이 파고 들기 전에 두 환경의 차이점을 살펴 보겠습니다.

개인 환경

개인 환경은 자체 스타일의 구성 요소를 제공하고 그대로 사용해야하는 폐쇄 된 생태계입니다. 따라서 특정 스타일 가이드 또는 디자인 시스템에서 구성 요소 라이브러리를 구축하는 경우 각 구성 요소는 사용자 정의 스타일을 반영하므로 필요할 때마다 인코딩 할 필요가 없습니다.

JavaScript 논리에 대해서도 마찬가지입니다. 예를 들어, 닫힌 그림자 루트를 부착하여 다른 사람들이 실수로 QuerySelector와 함께 그림자 경계를 뚫지 못하게 할 수 있습니다. 따라서 스타일의 불일치 및 CSS 충돌과 같은 문제를 피하기 위해 구성 요소를 단순히 선택하고 사용할 수 있습니다. 저자로서 특정 사용 사례의 구성 요소를 스타일링하는 데 사용할 수있는 CSS 사용자 정의 속성 (또는 :: 부품) 세트를 정의 할 수도 있지만 시스템 설계의 초점은 아닙니다.

이것은 개인 환경에서 웹 구성 요소를 사용하는 예입니다. 모든 스타일과 논리는 그림자 뿌리에 포함되며 간단히 모든 페이지에 추가 할 수 있습니다.

이 예와 후속 예는 데모 목적으로 만 사용되며 접근성 및 기타 최적화와 같은 중요한 상황을 고려하지 않기 때문에 생산 환경을위한 것이 아닙니다.

개인 환경의 구성 요소는 해당 환경 밖에서 거의 사용되지 않습니다. 예를 들어, 디자인 시스템 (자체 강제 스타일)에서 요소를 얻으려고하면 프로젝트에 추가하여 사용자 정의 할 수 없습니다. Bootstrap이 선호도에 따라 테마를 설정하고 사용자 정의 할 수있는 방법을 알고 있습니까? 이것은 정반대입니다. 이러한 구성 요소는 환경과 환경에서만 실행되도록 고안되었습니다.

표준 환경

표준 환경은 아마도 가장 복잡한 구성 요소 유형 일 것입니다. 환경은 VUE와 같은 성숙한 프레임 워크와 일반 기본 HTML에 반응 할 수 있기 때문에 모든 사람이 다른 요소 인 것처럼 해당 구성 요소를 사용할 수 있어야하기 때문입니다.

예를 들어, 구성 요소가 공개적으로 추가되면 (예 : NPM에 추가),이를 사용하는 사람들은 적어도 어느 정도까지 사용자 정의 할 수있을 것으로 예상됩니다.

자체 데모 스타일의 HTML 요소를 알고 있습니까? 요소는 CSS를 사용하여 명시 적으로 스타일링해야하기 때문에 대답은 "아니오"여야합니다. 표준 환경에서 만든 웹 구성 요소에 대해서도 마찬가지입니다. 클래스 및 속성 또는 기타 방법을 추가하여 단일 웹 구성 요소를 사용자 정의 할 수 있어야합니다.

이것은 폐쇄 된 환경 예에서 볼 수있는 것과 동일합니다.<todo-list></todo-list> 요소이지만 표준 환경을 위해 설계되었습니다. 그림자 루트에 데모 스타일이없는 그대로 작동합니다. 실제로 기능을 보장하기 위해 필요한 논리와 기본 CSS 만 포함합니다. 그렇지 않으면 표준 HTML 요소 (DIV와 같은)처럼 사용자 정의 할 수 있습니다.

각 환경에 대해 우리가 보는 두 가지 예는 동일한 구성 요소를 사용하여 만들어졌습니다. 차이점은 표준 환경의 구성 요소를 외부 CSS를 사용하여 사용자 정의하고 선택할 수 있다는 것입니다.

웹 구성 요소 및 구성

좋아, 웹 구성 요소를 사용하는 것은 실제로 일반 HTML을 사용하는 것과 동일하지만, 우리가 볼 수 있듯이, 주어진 컨텐츠의 패러다임과 원리를 따르는 것이 매우 중요합니다. 우리가주의를 기울여야 할 것은 웹 구성 요소의 조합 입니다.

Google 웹 기초는 다음과 같이 설명합니다.

조합은 Shadow Dom의 가장 알려지지 않은 특징 중 하나이지만 아마도 가장 중요한 기능입니다.

웹 개발 세계에서 구성은 HTML을 사용하여 선언적으로 응용 프로그램을 구축하는 방법입니다. 다른 빌딩 블록 (<div> ,,,<code><s></s> ,,,<em></em> ,,,<strong></strong> ) 응용 프로그램을 구성하기 위해 함께 모입니다. 이 태그 중 일부는 서로 사용할 수도 있습니다. 조합이 이유입니다<select></select> ,,,<details></details> ,,,<summary></summary> 그리고<video></video> 그러한 기본 요소가 매우 유연한 이유. 각 태그는 특정 HTML을 자식 요소로 받아들이고 일부 특별 작업을 수행합니다. 예를 들어,<select></select> 방법을 알고 있습니다<option></option> 그리고<optgroup></optgroup> 드롭 다운 목록 및 다중 선택 위젯으로 렌더링됩니다.<details></details> 요소는 할 것입니다<summary></summary> 확장 가능한 화살표로 제시됩니다. 심지어<video></video> 또한 특정 아동 요소를 다루는 방법을 알고 있습니다.<track></track> 요소는 렌더링되지 않지만 비디오의 동작에 영향을 미칩니다. 얼마나 놀랍습니다! 구성은 HTML을 사용할 때 일반적으로하는 일입니다. 웹 구성 요소는 단지 DOM 참조 (논리 컨테이너가 아님)가있는 HTML 요소이므로 구성 요소 및 하위 구성 요소를 구축하기 위해 조합에 의존해야합니다. 당신이 고려한다면

그리고<select></select> ,이 요소를 선언적으로 결합하여 최종 출력을 얻고 주 구성 요소 (예 : [readonly] ) 또는 자식 구성 요소 (예 : [selected] )에 사용할 수있는 특정 속성이 있습니다. 웹 구성 요소에 대해서도 마찬가지입니다. 사용자 정의 목록을 작성하는 경우 기본 구성 요소를 구축하는 것을 고려하십시오.<custom-list></custom-list> ) 및 하위 구성 요소 (<custom-li></custom-li> ). 사용<slot></slot> 요소, 자식 요소가 배치 될 위치를 정의 할 수 있으며 자식 요소가 전달되지 않을 때 표시되는 자리 표시 자 콘텐츠를 정의 할 수 있습니다.

웹 구성 요소 및 접근성

고려해야 할 또 다른 것은 우리가 "작은" 접근성 주제라고 부르는 것입니다. 완전히 새로운 HTML 요소를 만들고 있으므로 기본 의미 적 역할, 키보드 내비게이션 및 모션 감소 및 높은 대비 설정과 같은 사용자의 운영 체제 환경 설정을 제공하기 위해 요소의 접근성을 고려해야합니다.

액세스 가능하고 포괄적 인 구성 요소를 구축하기위한 참조로 다음 리소스를 강력히 권장합니다.

• 포괄적 인 구성 요소
• Web.dev에서 "모든 사람을위한 효과"
• 와이 아리아 창의적 연습
• Webaim WCAG 체크리스트

결론적으로

웹 구성 요소는 웹 개발에서 새로운 기술이므로 의도 한 사용 또는 최대 사용에 따라 구축 할 때 우리를 안내 할 수있는 잘 정의 된 모범 사례가 없습니다. 당신이 그들을 사용하는 것을 발견 할 때, 당신 이이 게시물에서 얻을 수있는 유일한 것은 그들이 닫힌 환경인지 또는 표준 환경 에 대한 것인지 고려하고 자신에게 물어 보는 것 입니다.

• 이 구성 요소를 사용할 것인가 ?
• 이 사람이 사용자 정의 해야하는 많은 유연성?
• 이 구성 요소는 모든 사람이나 특정 청중에게 적합 합니까 ?