방탄 웹 구성 요소 API

웹 구성 요소/사용자 정의 요소는 UX를 더욱 효율적이고 확장 가능하게 만드는 몇 가지 뛰어난 기능을 제공하지만 팀이 구성 요소에 대해 좋은 경험을 하지 못하게 할 수 있는 몇 가지 "문제"가 있습니다.

문제

맞춤 요소/웹 구성 요소의 가장 큰 장점 중 하나는 때때로 어려울 수 있습니다. 어디서나 사용할 수 있습니다. 프레임워크에서 사용되는지, 유형이 안전한 환경에서 사용되는지, PHP와 같은 언어로 서버에서 렌더링되는지, JavaScript의 creatElement 함수를 사용하여 프로그래밍 방식으로 생성되는지, 심지어 일반 HTML에서 사용되는지 알 수 없습니다.

문제는 웹 구성 요소 API가 올바르게 구현되었는지 확인할 수 있는 일관된 방법이 없다는 것입니다. 이 때문에 당사 컴포넌트 라이브러리의 PR 체크리스트 항목 중 하나는 다음과 같습니다.

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

예를 들어, 우리 라이브러리에는 기본 요소에는 일부 지정된 값이 있는 유형 속성이 있습니다. 라디오 및 체크박스와 같은 일부 다른 컨트롤에 대한 특정 구성 요소가 있기 때문에 동일한 옵션이 모두 동일하지는 않습니다.

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

참고: 코드 예시에서는 Lit를 사용하고 있지만 여기서 논의한 원칙은 다른 라이브러리 및 프레임워크에도 적용될 수 있습니다.

이 속성을 테스트할 때 일관되지 않은 결과가 나타납니다.

• 설정
  • 모든 것이 예상대로 작동합니다.

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

• 설정되지 않음
  • 기본값으로 인해 속성이 설정되지 않은 경우에도 구성요소가 제대로 작동합니다
  • 내부 HTML 요소는 탄력적이지만 구성 요소의 사용자 정의 논리 및 유효성 검사가 중단되므로 속성이 정의되지 않은 경우 구성 요소가 올바르게 렌더링됩니다.

// When the attribute is not set
<my-input></my-input>

// When the property is `undefined` (example using JSX)
<my-input type="{undefined}"></my-input>

• 설정이 잘못됨
  • type 속성 값을 "rubbish"로 설정하면 텍스트 입력이 렌더링되지만 맞춤 논리와 유효성 검사도 중단됩니다.
  • 유효한 HTML 입력 유형이지만 구성 요소에 대해 지정한 값이 아닌 값으로 설정하면 사용자 정의 논리 및 유효성 검사뿐 아니라 스타일/디자인도 깨뜨리는 구성 요소용 컨트롤이 아닌 컨트롤이 렌더링됩니다. .

<!-- not a real type -->
<my-input type="rubbish"></my-input>

<!-- we don't want users using this type -->
<my-input type="range"></my-input>

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

어떻게 해결하나요?

네이티브 HTML 요소가 "설정, 설정 해제 및 잘못 설정" 테스트를 통과한 것 같으니 이를 통해 학습할 수 있는지 살펴보겠습니다.

네이티브 입력의 속성을 잘못 설정하고 속성 값을 기록해 보니 왜 작동하는지 알 수 있었습니다.

<!-- set the value to a non-standard type -->
<input type="rubbish">
<input>



<p>If an invalid value is assigned to the attribute or property, it falls back to a default value. We should be able to do the same and still maintain strong typing.</p>

<p>Let's start by creating a list of valid values and a type for our property.<br>
</p>

<pre class="brush:php;toolbar:false">const inputTypes = [
  'color',
  'date',
  'email',
  'number',
  'password',
  'search',
  'tel',
  'text',
] as const;

배열을 사용하여 TypeScript 유효성 검사를 위한 공용체 유형을 생성할 수 있습니다.

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

이제 일부 유효성 검사 논리를 사용하여 맞춤 요소 속성을 업데이트할 수 있습니다. 기존 속성을 표준 JavaScript 클래스 getter 및 setter로 변환하면 이를 수행할 수 있습니다.

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

최종 결과는 다음과 같습니다.

결론

이 새로운 유효성 검사를 통해 입력 구성 요소는 이전보다 훨씬 더 탄력적이며 필요한 경우 더 복잡한 유효성 검사도 가능합니다. 이 방법은 일부 속성, 특히 스타일링을 위한 속성에 과잉일 수도 있습니다. 이러한 시나리오에 대해서는 이 기사를 꼭 확인하세요.

위 내용은 방탄 웹 구성 요소 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!