웹 구성 요소 스타일 지정에 기본 속성 값을 사용하지 마십시오

오해하지 마세요. 저는 웹 구성 요소 API의 기본값에 반대하는 것이 없습니다. 내가 그들과 관련된 문제는 그들이 신뢰할 수 없다는 것입니다.

문제

API에 사용 가능한 옵션 목록을 제공하는 일반적인 접근 방식은 TypeScript의 untion 유형을 사용하는 것입니다.

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

다음은 변형이 작동하도록 하는 몇 가지 기본 CSS입니다.

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

참고: 코드 예제에서는 Lit을 사용하고 있지만 여기서 설명하는 원칙은 다른 라이브러리 및 프레임워크에도 쉽게 적용할 수 있습니다.

문제는 맞춤 요소/웹 구성 요소를 어디에서나 사용할 수 있다는 것입니다. 문자열로 DOM에 삽입할 수 있고, PHP와 같은 서버측 언어로 삽입할 수 있으며, JavaScript의 createElement 함수 또는 표준 HTML로도 생성할 수 있습니다. 내가 얻은 것은 사용자 정의 요소 속성이 정확하게 설정되도록 보장하는 "유형 안전" 방법이 항상 있는 것은 아니라는 것입니다. 이 때문에 당사 컴포넌트 라이브러리의 PR 체크리스트 항목 중 하나는 다음과 같습니다.

✅ 속성과 속성은 설정, 해제, 잘못 설정된 경우에도 작동합니다.

API 테스트

이러한 지침에 따라 위의 API 설정을 테스트해 보겠습니다.

• 세트 - 모든 것이 좋아 보입니다.

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• 설정되지 않음
  • 속성을 설정하지 않아도 기본값이 있고 설정 시 요소에 속성을 반영하도록 구성되어 있으므로 잘 작동합니다.
  • variant 속성을 정의되지 않음으로 설정하면 스타일이 손상됩니다.

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant="{undefined}">Unset Button</my-button>

• 잘못 설정 - 변형 속성을 "쓰레기"로 설정하면 작동이 중단됩니다.

<my-button variant="rubbish">Rubbish Button</my-button>

여기에서 이 예를 테스트할 수 있습니다.

API 수정

이 문제를 해결하는 가장 쉬운 방법은 버튼 요소 스타일을 기본 스타일과 일치시키는 것입니다.

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

이제 기본 변형 코드를 제거할 수 있습니다.

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

혼란을 피하기 위해 스타일을 그대로 두고 댓글을 추가할 수 있습니다.

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

또한 TypeScript API를 업데이트하여 선택 사항으로 만들고 기본값을 제거하겠습니다.

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

이제 값이 설정되거나 설정되지 않거나 잘못 설정된 경우 요소가 일관되게 작동합니다!

여기에서 최종 코드를 볼 수 있습니다:

결론

기본값에 대한 종속성을 제거하면 더욱 탄력적인 웹 구성 요소 API를 만들 수 있습니다. 구성 요소가 제대로 작동하기 위해 기본값이 있어야 하는 경우 이 문서를 확인하여 일관되게 작동하는 웹 구성 요소를 만드세요.

위 내용은 웹 구성 요소 스타일 지정에 기본 속성 값을 사용하지 마십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!