HTML 웹 구성 요소는 점진적 향상 및 CSS 캡슐화가 더 쉬워집니다!

Jeremy Keith의 통찰력있는 기사는 작년에 HTML 웹 구성 요소를 소개했습니다. 그의 핵심 포인트는 깊게 공명했습니다. DOM 조작 및 이벤트 처리로 동일한 결과를 얻을 수 있지만 웹 구성 요소는 단일 책임 원칙을 준수하여보다 강력하고 휴대용이며 유지 관리 가능한 솔루션을 제공합니다.

나의 초기 오해는 모든 웹 구성 요소가 전적으로 JavaScript와 Shadow Dom에 의존했다는 것입니다. 이것이 가능하지만, 특히 진보적 인 향상 옹호자들에게 우수한 접근 방식은 웹 구성 요소의 고유 한 HTML 기능을 활용합니다. 그들은 근본적으로 HTML입니다. Andy Bell의 최근 연구는 진보적 인 향상에 대한 추가 맥락을 제공합니다 (이 기사의 범위를 벗어나더라도)

기본 기능에 대한 필수 JavaScript 의존성없이 CSS 캡슐화 및 점진적인 향상 가능성의 주요 기능을 보여주는 세 가지 예를 살펴 보겠습니다. JavaScript는 경험을 향상시키는 데 사용되지만 핵심 기능은 그 경험 없이도 그대로 유지됩니다. 이 예제는 소스 코드와 함께 Github의 웹 UI Boilerplate Component Library (Storybook)에서 사용할 수 있습니다. 예 1 : 공개 패턴을 ​​사용하여 웹 구성 요소 구축에 대한 Chris Ferdinandi의 튜토리얼에서 영감을 얻은이 예제는 그의 데모에서 확장됩니다. 코어는 HTML입니다. 웹 구성 요소는 사용자 정의 요소 이름을 허용합니다. 여기, 는 에 텍스트를 표시/숨기는 버튼이 포함되어 있습니다.

<webui-disclosure data-bind-click-outside="" data-bind-escape-key="">
  Show / Hide
  <div data-content="">
    <p>Content to be shown/hidden.</p>
  </div>
</webui-disclosure>

JavaScript가 비활성화 된 경우 버튼 ( 속성을 ​​통해 숨겨진)은 보이지 않으며 내용이 표시됩니다. 이것은 간단한 점진적 향상을 보여줍니다. JavaScript에 관계없이 컨텐츠에 액세스 할 수 있습니다 이는 ESC 키를 통해 클로저를 추가하거나 요소 외부의 클릭을 추가하여 Ferdinandi의 데모를 연장합니다 ( s 사용). 사용자 정의 요소가 정의됩니다

사용자 정의 요소 이름은 점선을 사용합니다 (예 : ). 대시는 일반적으로 단어를 분리하지만 엄격하게 필요하지 않습니다. hidden TypeScript 사용은 오류 예방에 유리하지만 간단하게하기 위해 JavaScript ES 모듈 구조는 다음과 같습니다.

이벤트 리스너는 (Hawk Ticehurst에 의해 설명 된 바와 같이)

및 data-attribute로 처리됩니다. 기본 기능에 필수적인 것은 아니지만 JavaScript는 UX 및 접근성을 향상시킵니다. 이것은 점진적인 향상을 보여줍니다. 추가 CSS가 필요하지 않습니다. 스타일링은 상속됩니다.

예제 2 :

customElements.define('webui-disclosure', WebUIDisclosure);

이 예제는 탭 구성 요소의 CSS 캡슐화 및 점진적인 향상을 강조합니다. HTML 구조 :

CSS가 캡슐화됩니다 <my-component></my-component> 기본 스타일 (,

)은 JavaScript에 관계없이 적용됩니다. 속성이있는 스타일은 JavaScript가 활성화 된 경우에만 추가되어 점진적인 향상을 제공합니다. 스타일은

로 구분되어 충돌을 방지합니다. 간단한 자손 선택기는 BEM과 같은 복잡한 방법론을 대체 할 수 있습니다 스타일 시트는 JavaScript를 통해 가져올 수 있습니다 (JavaScript를 사용할 수있는 경우에만 소비 됨) :

또는 Shadow dom : 를 사용하여 인라인 스타일을 주입 할 수 있습니다

class WebUIDisclosure extends HTMLElement {
  constructor() {
    super();
    this.trigger = this.querySelector('[data-trigger]');
    this.content = this.querySelector('[data-content]');
    this.bindEscapeKey = this.hasAttribute('data-bind-escape-key');
    this.bindClickOutside = this.hasAttribute('data-bind-click-outside');

    if (!this.trigger || !this.content) return;

    this.setupA11y();
    this.trigger?.addEventListener('click', this);
  }

  setupA11y() {
    // Add ARIA props/state to button.
  }

  handleEvent(e) {
    // 1. Toggle visibility of content.
    // 2. Toggle ARIA expanded state on button.
  }

  connectedCallback() {
    document.addEventListener('keyup', (e) => {
      // Handle ESC key.
    });

    document.addEventListener('click', (e) => {
      // Handle clicking outside.
    });
  }

  disconnectedCallback() {
    // Remove event listeners.
  }
}

"light "dom (구성 요소 태그 사이의 내용)은 글로벌 스타일을 상속합니다. Shadow Dom은 내부 스타일이 필요합니다. Dave Rupert의 기사는 외부 스타일이 Shadow Dom과 어떻게 상호 작용하는지 설명합니다. Progressive 향상은 JavaScript : 로 달성됩니다

JavaScript는 ARIA 역할과 키보드 내비게이션을 추가하여 접근성을 향상시킵니다. JavaScript가 없으면 기본 동작 (패널 링크)에 액세스 할 수 있습니다. 예 3 : constructor() Shadow Dom을 사용하여 JavaScript에 의해 완전히 생성 된이 예는 JavaScript가 활성화 된 경우에만 렌더링됩니다. Ajax 요청에 대한 로딩 상태를 나타내는 데 사용됩니다 html은 간단합니다 : connectedCallback() JavaScript : aria-expanded aria-controls 속성은 pseudo-selector를 사용하여 구성 요소 외부에서 svg를 스타일링 할 수있게합니다.

CSS 사용자 정의 속성을 사용할 수 있습니다

<webui-disclosure data-bind-click-outside="" data-bind-escape-key="">
  Show / Hide
  <div data-content="">
    <p>Content to be shown/hidden.</p>
  </div>
</webui-disclosure>

진보적 인 향상은 내재되어 있습니다. 로더는 JavaScript가 지원되는 경우에만 나타납니다

결론 HTML 웹 구성 요소는 html을 우선 순위를 정하고, 향상된 기능 및 캡슐화에 필요한 경우에만 JavaScript를 사용합니다. 그들은 강력하고 유지 관리 가능하며 접근 가능한 웹 애플리케이션을 구축하는 데 강력한 접근 방식을 제공합니다.

위 내용은 HTML 웹 구성 요소는 점진적 향상 및 CSS 캡슐화가 더 쉬워집니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!