웹 구성 요소로 작업하는 동안 직면할 수 있는 주의 사항

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}

라우팅이 프레임워크가 아닌 브라우저에 의해 처리되기 때문입니다. 프레임워크는 이러한 이벤트에 개입하고 프레임워크 수준에서 라우팅을 처리해야 합니다. 그러나 이벤트는 섀도우 DOM에서 대상이 변경되므로 프레임워크가 앵커 요소에 쉽게 액세스할 수 없기 때문에 이를 수행하기가 더 어려워집니다.

@Component({
  selector: 'some-web-component-wrapper',
  template: '<some-web-component [someProperty]="someClassProperty"></some-web-component>
})
export class SomeWebComponentWrapper {
  @Input() someClassProperty: string;
}

@NgModule({
    declarations: [SomeWebComponentWrapper],
    exports: [SomeWebComponentWrapper],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WrapperModule {}

소비 측면에서는 이 이벤트를 수신하고 프레임워크별 라우팅 함수를 호출하여 라우팅을 처리하도록 전역 이벤트 리스너를 설정할 수 있습니다.

7. 중첩된 섀도우 돔

웹 구성 요소를 구축할 때. 다른 웹 구성요소를 슬롯에 배치할지, 아니면 다른 웹 구성요소 안에 중첩할지 결정할 수 있습니다. 예시는 다음과 같습니다.

슬롯 아이콘

import React from 'react';
import { createComponent } from '@lit/react';
import { MyElement } from './my-element.js';

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

중첩 아이콘

<MyElementComponent
  active={isActive}
  onactivate={(e) => setIsActive(e.active)}
  onchange={handleChange}
/>

구성 요소를 중첩하기로 결정하면 중첩된 구성 요소를 쿼리하기가 더 어려워질 수 있습니다. 특히 페이지의 특정 요소를 대상으로 해야 하기 때문에 엔드 투 엔드 테스트를 작성해야 하는 QA 팀이 있는 경우.
예를 들어 some-icon에 액세스하려면 먼저 ShadowRoot를 가져와 some-banner에 액세스한 다음 해당 섀도우 루트 내에 새 쿼리를 생성해야 합니다.

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

간단해 보일 수 있지만 구성요소가 더 깊이 중첩될수록 점점 더 어려워집니다. 또한 구성 요소가 중첩된 경우 도구 설명 작업이 더 어려워질 수 있습니다. 특히 깊게 중첩된 요소를 대상으로 하여 그 아래에 도구 설명을 표시해야 하는 경우에는 더욱 그렇습니다.

제가 발견한 바에 따르면 슬롯을 사용하면 구성 요소가 더 작고 유연해지며 유지 관리도 더 용이해집니다. 따라서 슬롯을 선호하고 중첩된 섀도우 돔을 피하세요.

8. 제한적::슬롯형 선택기

슬롯은 UI 요소를 구성하는 방법을 제공하지만 웹 구성 요소에는 한계가 있습니다.

::slotted 선택기는 슬롯의 직계 하위 항목에만 적용되므로 더 복잡한 시나리오에서는 유용성이 제한됩니다.

예를 들어보겠습니다.

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  render() {
    return html`<p>Hello world!</p>`;
  }
}

export class SimpleGreeting extends LitElement {
  static tagName = 'simple-greeting';

  render() {
    return html`<p>Hello world!</p>`;
  }
}

[SimpleGreeting].forEach((component) => {
  const newTag = `app1-${component.tagName}`;
  if (!customElements.get(newTag)) {
    customElements.define(newTag, SimpleGreeting);
  }
});

10. 느린 기능 채택

웹 구성 요소는 새로운 기능과 모범 사례를 채택하는 데 있어 Vue, React, Svelte, Solid와 같은 인기 프레임워크보다 뒤처지는 경우가 많습니다.
이는 웹 구성요소가 브라우저 구현 및 표준에 의존하기 때문에 최신 JavaScript 프레임워크의 빠른 개발 주기에 비해 발전하는 데 더 오랜 시간이 걸릴 수 있기 때문일 수 있습니다.
결과적으로 개발자는 특정 기능을 기다리거나 다른 프레임워크에서 쉽게 사용할 수 있는 해결 방법을 구현해야 할 수도 있습니다.

이에 대한 몇 가지 예는 JS에서 CSS를 스타일 지정의 기본 옵션으로 사용하는 Lit입니다. JS 프레임워크의 CSS에 성능 문제가 있다는 것은 오랫동안 알려져 왔습니다
추가 런타임 오버헤드가 발생하는 경우가 많았기 때문입니다. 그래서 우리는 런타임 기반 솔루션이 없는 JS 프레임워크에서 최신 CSS를 보기 시작했습니다.
Lit의 JS 솔루션 CSS는 여전히 런타임 기반입니다.

또 다른 예는 Signals입니다. 현재 Lit의 기본 동작은 @property 데코레이터를 추가하여 클래스 속성에 반응성을 추가하는 것입니다.
그러나 속성이 변경되면 전체 구성 요소가 다시 렌더링됩니다. 신호를 사용하면 신호에 의존하는 구성 요소의 일부만 업데이트됩니다.
이는 UI 작업에 더 효율적입니다. 매우 효율적이어서 이를 JavaScript에 추가하는 새로운 제안(TC39)이 있습니다.
이제 Lit는 Signals를 사용하기 위한 패키지를 제공하지만 Vue 및 Solid와 같은 다른 프레임워크가 이미 수년 동안 이 기능을 수행해 왔을 때 이는 기본 반응성이 아닙니다.
신호가 웹 표준에서 벗어날 때까지 몇 년 동안 신호를 기본 반응성으로 보지 못할 가능성이 높습니다.

이전 경고 "9. 슬롯 요소는 항상 돔에 있습니다"와 관련된 또 다른 예입니다. Svelte의 창시자인 Rich Harris가 이에 대해 이야기했습니다
5년 전 "내가 웹 구성 요소를 사용하지 않는 이유"라는 제목의 그의 블로그 게시물에서.
그는 Svelte v2에서 슬롯 콘텐츠가 열심히 렌더링되는 방식에 대해 웹 표준 접근 방식을 어떻게 채택했는지에 대해 이야기합니다. 그러나 그들은 그것에서 벗어나야 했습니다
Svelte 3에서는 개발자에게 큰 좌절감을 안겨주었기 때문입니다. 그들은 대부분의 경우 슬롯 콘텐츠가 느리게 렌더링되기를 원한다는 사실을 알아냈습니다.

Vuejs와 같은 다른 프레임워크가 이미 이를 지원하는 경우 웹 구성 요소에서 슬롯에 데이터를 전달하는 쉬운 방법이 없다는 것과 같은 더 많은 예를 생각해 낼 수 있습니다. 하지만 여기서 중요한 점은
웹 표준을 따르기 때문에 웹 구성 요소는 웹 표준을 따르지 않는 프레임워크보다 기능을 훨씬 느리게 채택합니다.
웹 표준에 의존하지 않음으로써 우리는 혁신을 이루고 더 나은 솔루션을 제시할 수 있습니다.

결론

웹 구성 요소는 재사용 가능하고 캡슐화된 맞춤 요소를 만드는 강력한 방법을 제공합니다. 그러나 우리가 살펴본 것처럼 개발자가 작업할 때 직면할 수 있는 몇 가지 주의 사항과 과제가 있습니다. 프레임워크 비호환성, 마이크로 프런트엔드의 사용, Shadow DOM의 제한 사항, 이벤트 대상 변경 문제, 슬롯 및 느린 기능 채택 등은 모두 신중하게 고려해야 하는 영역입니다.

이러한 과제에도 불구하고 진정한 캡슐화, 이식성, 프레임워크 독립성과 같은 웹 구성 요소의 이점은 웹 구성 요소를 현대 웹 개발의 귀중한 도구로 만듭니다. 생태계가 계속 발전함에 따라 이러한 문제를 해결하는 개선 사항과 새로운 솔루션을 기대할 수 있습니다.

웹 구성 요소를 고려 중인 개발자의 경우 이러한 장단점을 평가하고 해당 분야의 최신 발전 사항에 대한 최신 정보를 얻는 것이 중요합니다. 올바른 접근 방식과 이해를 통해 웹 구성요소는 개발 툴킷에 강력한 추가 기능을 제공할 수 있습니다.

위 내용은 웹 구성 요소로 작업하는 동안 직면할 수 있는 주의 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!