맞춤 요소를 사용하면 자신만의 HTML 태그를 구성할 수 있습니다. 이 체크리스트에는 고품질 요소를 제작하는 데 도움이 되는 권장사항이 포함되어 있습니다.
맞춤 요소를 사용하면 HTML을 확장하고 고유한 태그를 정의할 수 있습니다. 이들은
매우 강력한 기능이지만 저수준이므로
항상 자신의 요소를 가장 잘 구현하는 방법을 명확히 합니다.
사용자가 최고의 사용 환경을 조성할 수 있도록 돕기 위해
체크리스트를 확인해 보세요. 이 시리즈는 여러분이 직업을 지니는 데 필요한 모든 것을
맞춤 요소가 있습니다.
체크리스트
그림자 DOM
섀도우 루트를 만들어 스타일을 캡슐화합니다.
이유가 무엇인가요?
요소의 섀도우 루트에서 스타일을 캡슐화하면 작동합니다.
어디에 사용되든 상관없이 이는 개발자가
는 요소를 다른 요소의 섀도우 루트 내부에 배치하려고 합니다. 이
체크박스나 라디오 버튼과 같은 단순한 요소에도 적용됩니다. 그것은
섀도우 루트 내부의 유일한 콘텐츠는
있습니다.
생성자는 요소에 대한 배타적인 지식이 있는 경우입니다.
다른 구현 세부정보를 원하지 않는 구현 세부정보를 설정할 수 있는 좋은 기회입니다.
복잡하게 만듭니다. 이 작업은
connectedCallback:
요소가 분리되었다가 문서에 다시 첨부되는 상황이 발생할 수 있습니다.
:host 디스플레이 스타일 (예: block,inline-block,flex)(기본값인
inline입니다.
이유가 무엇인가요?
맞춤 요소는 기본적으로 display: inline이므로
width 또는 height는 아무런 영향을 미치지 않습니다. 자주
개발자에게 예기치 않은 문제로 불편을 야기할 수 있으며
있습니다. inline 디스플레이를 선호하지 않는 한
항상 기본 display 값을 설정해야 합니다.
전역 속성은 모든 HTML 요소에 있는 속성입니다. 다소 유용함
예를 들어 tabindex 및 role이 있습니다. 맞춤 요소
초기 tabindex를 0으로 설정하여 키보드가 되도록 할 수 있습니다.
포커스 가능합니다 하지만 항상 먼저 해당 API를 사용하는 개발자가
요소가 이 값을 다른 값으로 설정했습니다. 예를 들어
tabindex에서 -1로 변경할 경우
요소가 대화형으로
설정되어야 합니다.
원시 데이터 속성과 속성을 동기화 상태로 유지하여
속성을 사용하거나 그 반대의 경우도 마찬가지입니다.
이유가 무엇인가요?
사용자가 요소와 상호작용하는 방식을 알 수 없습니다. 그들은
자바스크립트에서 속성을 설정하면
getAttribute()와 같은 API를 사용합니다. 모든 속성에
두 속성 모두 반영하면
더 많은 사용자가 해당 요소로 작업할 수 있습니다. 즉,
setAttribute('foo', value)는 상응하는
foo 속성과 그 반대의 경우도 마찬가지입니다. 물론
이 규칙을 사용할 수 있습니다. 높은 빈도의 속성을 반영해서는 안 됩니다(예:
동영상 플레이어의 currentTime. 적절하게 판단하세요. 만약
사용자가 속성 또는 속성과 상호작용할 것으로 보이는 경우
이를 반영하는 것은 부담이 되지 않습니다.
일반적으로 기본 제공 HTML 요소로서
API를 통해 풍부한 데이터 (일반 자바스크립트 객체 및 배열)를
속성 리치 데이터는 대신 메서드 호출이나
속성 리치 데이터를 기본 데이터 세트로 사용하는 경우 몇 가지 명백한 단점이 있습니다.
특성: 큰 객체를 문자열로 직렬화하는 데 비용이 많이 들 수 있습니다.
이 문자열화 프로세스에서 객체 참조가 손실됩니다. 대상
예를 들어 다른 객체에 대한 참조가 있는 객체를 문자열화하면
또는 DOM 노드를 사용한 경우 해당 참조는 손실됩니다.
리치 데이터 속성을 속성에 반영하지 않습니다.
이유가 무엇인가요?
리치 데이터 속성을 속성에 반영하는 것은 불필요하게 많은 비용이 들며
동일한 JavaScript 객체를 직렬화 및 역직렬화해야 하기 때문에 예외적인 경우
이 기능으로만 해결할 수 있는 사용 사례가 있다면
피하는 것이 가장 좋습니다.
요소 이전에 설정되었을 수 있는 속성이 있는지 확인하는 것이 좋습니다.
업그레이드되었습니다.
이유가 무엇인가요?
요소를 사용하는 개발자가 요소에 속성 설정을 시도할 수 있습니다.
선언되어야 합니다 특히
개발자가 구성요소 로드를 처리하고 이를 스탬프하는 프레임워크를 사용함
해당 속성을 모델에 바인딩합니다.
_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도
속성
setchecked(value){constisChecked=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','');elsethis.removeAttribute('checked');}
또 다른 방법은 속성 setter가 속성에 반영되도록 하는 것입니다.
getter가 속성에 기반하여 값을 결정하도록 합니다.
마지막으로 attributeChangedCallback()를 사용하여 부작용을 처리할 수 있습니다.
ARIA 상태 적용과 같은
기능을 예로 들 수 있습니다
attributeChangedCallback(name,oldValue,newValue){consthasValue=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;...}}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2017-08-14(UTC)"],[],[]]