맞춤 요소 권장사항

맞춤 요소를 사용하면 자신만의 HTML 태그를 구성할 수 있습니다. 이 체크리스트에는 고품질 요소를 제작하는 데 도움이 되는 권장사항이 포함되어 있습니다.

맞춤 요소를 사용하면 HTML을 확장하고 고유한 태그를 정의할 수 있습니다. 이들은 매우 강력한 기능이지만 저수준이므로 항상 자신의 요소를 가장 잘 구현하는 방법을 명확히 합니다.

사용자가 최고의 사용 환경을 조성할 수 있도록 돕기 위해 체크리스트를 확인해 보세요. 이 시리즈는 여러분이 직업을 지니는 데 필요한 모든 것을 맞춤 요소가 있습니다.

체크리스트

그림자 DOM

섀도우 루트를 만들어 스타일을 캡슐화합니다.
이유가 무엇인가요? 요소의 섀도우 루트에서 스타일을 캡슐화하면 작동합니다. 어디에 사용되든 상관없이 이는 개발자가 는 요소를 다른 요소의 섀도우 루트 내부에 배치하려고 합니다. 이 체크박스나 라디오 버튼과 같은 단순한 요소에도 적용됩니다. 그것은 섀도우 루트 내부의 유일한 콘텐츠는 있습니다.
예 <howto-checkbox> 요소

생성자에서 섀도우 루트를 만듭니다.
이유가 무엇인가요? 생성자는 요소에 대한 배타적인 지식이 있는 경우입니다. 다른 구현 세부정보를 원하지 않는 구현 세부정보를 설정할 수 있는 좋은 기회입니다. 복잡하게 만듭니다. 이 작업은 connectedCallback: 요소가 분리되었다가 문서에 다시 첨부되는 상황이 발생할 수 있습니다.
예 <howto-checkbox> 요소

요소가 만든 하위 요소를 섀도우 루트에 배치합니다.
이유가 무엇인가요? 요소에서 만든 하위 요소는 구현의 일부이며 비공개입니다. 섀도우 루트를 보호하지 않으면 외부 JavaScript가 이러한 아동을 실수로 방해할 수 있습니다
예 <howto-tabs> 요소

<slot> 사용 Shadow DOM에 Light DOM 하위 요소 투영
이유가 무엇인가요? 구성요소의 사용자가 구성요소의 콘텐츠를 지정하도록 허용하는 것은 HTML 하위 요소로 구성요소의 구성 가능성을 높입니다. 브라우저에서 맞춤 요소를 지원하지 않는 경우 중첩된 콘텐츠는 계속 사용 가능하고 표시되며 콘텐츠에 액세스할 수 있습니다.
예 <howto-tabs> 요소

:host 디스플레이 스타일 (예: block, inline-block, flex)(기본값인 inline입니다.

이유가 무엇인가요? 맞춤 요소는 기본적으로 display: inline이므로 width 또는 height는 아무런 영향을 미치지 않습니다. 자주 개발자에게 예기치 않은 문제로 불편을 야기할 수 있으며 있습니다. inline 디스플레이를 선호하지 않는 한 항상 기본 display 값을 설정해야 합니다.
예 <howto-checkbox> 요소

숨겨진 속성을 따르는 :host 표시 스타일을 추가합니다.

이유가 무엇인가요? 기본 display 스타일이 적용된 맞춤 요소. 예: :host { display: block }는 낮은 특이도를 재정의합니다. 내장 <ph type="x-smartling-placeholder"></ph> hidden 속성입니다. hidden 속성을 display: none로 렌더링합니다. 또한 기본 display 스타일에 hidden 지원을 추가합니다. :host([hidden]) { display: none }.
예 <howto-checkbox> 요소

속성 및 속성

작성자가 설정한 전역 속성을 재정의하지 않습니다.

이유가 무엇인가요? 전역 속성은 모든 HTML 요소에 있는 속성입니다. 다소 유용함 예를 들어 tabindex 및 role이 있습니다. 맞춤 요소 초기 tabindex를 0으로 설정하여 키보드가 되도록 할 수 있습니다. 포커스 가능합니다 하지만 항상 먼저 해당 API를 사용하는 개발자가 요소가 이 값을 다른 값으로 설정했습니다. 예를 들어 tabindex에서 -1로 변경할 경우 요소가 대화형으로 설정되어야 합니다.
예 <howto-checkbox> 요소 자세한 내용은 페이지 작성자를 재정의하지 않습니다.

원시 데이터 (문자열, 숫자, 부울)를 지정할 수 있습니다

이유가 무엇인가요? 맞춤 요소는 기본 제공되는 요소와 같이 구성 가능해야 합니다. 구성은 선언적으로, 속성을 통해 또는 명령형으로 전달될 수 있습니다. 할 수 있습니다. 이상적으로는 모든 속성이 나타냅니다.
예 <howto-checkbox> 요소

원시 데이터 속성과 속성을 동기화 상태로 유지하여 속성을 사용하거나 그 반대의 경우도 마찬가지입니다.

이유가 무엇인가요? 사용자가 요소와 상호작용하는 방식을 알 수 없습니다. 그들은 자바스크립트에서 속성을 설정하면 getAttribute()와 같은 API를 사용합니다. 모든 속성에 두 속성 모두 반영하면 더 많은 사용자가 해당 요소로 작업할 수 있습니다. 즉, setAttribute('foo', value)는 상응하는 foo 속성과 그 반대의 경우도 마찬가지입니다. 물론 이 규칙을 사용할 수 있습니다. 높은 빈도의 속성을 반영해서는 안 됩니다(예: 동영상 플레이어의 currentTime. 적절하게 판단하세요. 만약 사용자가 속성 또는 속성과 상호작용할 것으로 보이는 경우 이를 반영하는 것은 부담이 되지 않습니다.
예 <howto-checkbox> 요소 자세한 내용은 재진입 문제를 방지합니다.

리치 데이터 (객체, 배열)만 속성으로 수락하는 것을 목표로 합니다.

이유가 무엇인가요? 일반적으로 기본 제공 HTML 요소로서 API를 통해 풍부한 데이터 (일반 자바스크립트 객체 및 배열)를 속성 리치 데이터는 대신 메서드 호출이나 속성 리치 데이터를 기본 데이터 세트로 사용하는 경우 몇 가지 명백한 단점이 있습니다. 특성: 큰 객체를 문자열로 직렬화하는 데 비용이 많이 들 수 있습니다. 이 문자열화 프로세스에서 객체 참조가 손실됩니다. 대상 예를 들어 다른 객체에 대한 참조가 있는 객체를 문자열화하면 또는 DOM 노드를 사용한 경우 해당 참조는 손실됩니다.

리치 데이터 속성을 속성에 반영하지 않습니다.

이유가 무엇인가요? 리치 데이터 속성을 속성에 반영하는 것은 불필요하게 많은 비용이 들며 동일한 JavaScript 객체를 직렬화 및 역직렬화해야 하기 때문에 예외적인 경우 이 기능으로만 해결할 수 있는 사용 사례가 있다면 피하는 것이 가장 좋습니다.

요소 이전에 설정되었을 수 있는 속성이 있는지 확인하는 것이 좋습니다. 업그레이드되었습니다.

이유가 무엇인가요? 요소를 사용하는 개발자가 요소에 속성 설정을 시도할 수 있습니다. 선언되어야 합니다 특히 개발자가 구성요소 로드를 처리하고 이를 스탬프하는 프레임워크를 사용함 해당 속성을 모델에 바인딩합니다.
예 <howto-checkbox> 요소 자세한 내용은 속성을 지연시킵니다.

수업을 자체 적용하지 마세요.

이유가 무엇인가요? 상태를 표현해야 하는 요소는 속성을 사용하여 표현해야 합니다. 이 class 속성은 일반적으로 개발자가 개발자의 요소를 사용해 코드를 작성하고 직접 작성하는 경우 의도치 않게 개발자 클래스를 밟아 봅시다.

이벤트

내부 구성요소 활동에 대한 응답으로 이벤트를 전달합니다.

이유가 무엇인가요? 요소에는 해당 요소만 알 수 있음(예: 타이머 또는 애니메이션 여부) 리소스 로드가 완료될 때까지 기다릴 필요가 없습니다 이벤트 전달이 유용함 이 변경사항에 대한 응답으로 호스트에게 구성요소의 상태가 다릅니다.

호스트 설정에 대한 응답으로 이벤트를 전달하지 않습니다. 속성 (아래쪽 데이터 흐름)

이유가 무엇인가요? 호스트 설정에 대한 응답으로 이벤트를 전달하는 것은 불필요함 호스트는 현재 상태를 설정하기만 하므로 현재 상태를 알고 있습니다. 이벤트 전달 호스트 설정에 대한 응답으로 속성이 데이터와 함께 무한 루프를 일으킬 수 있음 결합해야 합니다.
예 <howto-checkbox> 요소

설명 동영상

페이지 작성자를 재정의하지 않음

요소를 사용하는 개발자가 초기 상태입니다 예를 들어 ARIA role 또는 포커스 가능 여부를 tabindex입니다. 이러한 속성과 다른 전역 속성이 설정되었는지 살펴봤습니다

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

속성 지연 설정

개발자가 정의가 로드되었습니다. 개발자가 이 프레임워크는 구성 요소를 페이지에 삽입하고 구성 요소를 페이지에 삽입합니다. 속성을 모델에 바인딩하는 것입니다.

다음 예에서 Angular는 모델의 isChecked 속성을 체크박스의 checked 속성으로 설정합니다. 만약 방법 체크박스에 지연 로드되어 있다면 Angular에서 속성이 업그레이드되기 전에 확인된 속성을 업데이트합니다.

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

사용자설정 요소는 속성이 이미 포함되었는지 확인하여 이 시나리오를 처리해야 합니다. 이미 인스턴스에 설정되어 있습니다 <howto-checkbox> _upgradeProperty() 메서드를 사용하여 이 패턴을 보여줍니다.

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

_upgradeProperty()는 업그레이드되지 않은 인스턴스에서 값을 캡처하고 속성을 사용하여 맞춤 요소의 자체 속성 setter를 가리지 않도록 합니다. 이렇게 하면 요소의 정의가 최종적으로 로드될 때 올바른 상태를 반영합니다.

재진입 문제 방지

attributeChangedCallback()를 사용하여 상태를 기본 속성. 예를 들면 다음과 같습니다.

// When the [checked] attribute changes, set the checked property to match.
attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'checked')
    this.checked = newValue;
}

그러나 속성 setter도 속성

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    // OOPS! This will cause an infinite loop because it triggers the
    // attributeChangedCallback() which then sets this property again.
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

또 다른 방법은 속성 setter가 속성에 반영되도록 하는 것입니다. getter가 속성에 기반하여 값을 결정하도록 합니다.

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

이 예에서 속성을 추가하거나 삭제해도 속성이 설정됩니다.

마지막으로 attributeChangedCallback()를 사용하여 부작용을 처리할 수 있습니다. ARIA 상태 적용과 같은 기능을 예로 들 수 있습니다

attributeChangedCallback(name, oldValue, newValue) {
  const hasValue = newValue !== null;
  switch (name) {
    case 'checked':
      // Note the attributeChangedCallback is only handling the *side effects*
      // of setting the attribute.
      this.setAttribute('aria-checked', hasValue);
      break;
    ...
  }
}