웹 프론트엔드 CSS 튜토리얼 웹 구성 요소 API 사용 중단

웹 구성 요소 API 사용 중단

Nov 29, 2024 am 06:02 AM

웹 구성 요소 API를 더 이상 사용하지 않는 것은 패키지의 다음 주요 릴리스에서 기능이 제거될 것임을 사용자에게 알리는 좋은 방법입니다. 구성요소 API를 문서화하기 위해 사용자 정의 요소 매니페스트를 사용하는 경우 이는 보기보다 까다로울 수 있습니다. 웹 구성 요소에는 일반적으로 프레임워크 구성 요소보다 더 많은 공개 API가 있습니다.

  • CSS 변수
  • CSS 부분
  • 슬롯
  • 이벤트
  • 방법
  • 속성
  • 속성.

이 기사에서는 API 지원 중단을 문서화하고 주요 변경 사항을 도입하지 않고 대체 기능을 추가하는 방법을 설명합니다.

선적 서류 비치

지원 중단 과정에서 가장 까다로운 부분 중 하나는 문서입니다. 속성, 메소드 및 구성 요소의 경우 구성 요소 클래스의 JSDoc 주석에 @deprecated 태그를 추가하는 것만큼 간단할 수 있습니다.

/**
  * @deprecated This component is going away. Use ... instead.
  */
class MyElement extends HTMLElement {
  /** @deprecated This property is being removed. Use ... instead. */
  myProp;

  /** @deprecated This method is going away. Use ... instead. */
  myMethod() {
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사

CSS 변수, CSS 부분, 슬롯, 이벤트 및 속성은 일반적으로 클래스의 JSDoc에 문서화되어 있습니다.

다음은 맞춤 요소 JSDoc에 문서화할 수 있는 내용의 예입니다.

/**
 * @attr {boolean} disabled - disables the element
 * @attribute {string} foo - description for foo
 *
 * @csspart bar - Styles the bar element in the shadow DOM
 *
 * @slot - This is a default/unnamed slot
 * @slot container - You can put some elements here
 *
 * @cssprop --text-color - Controls the color of foo
 * @cssproperty [--background-color=red] - Controls the background color of bar
 *
 * @prop {boolean} prop1 - some description
 * @property {number} prop2 - some description
 *
 * @fires custom-event - some description for custom-event
 * @fires {MyType} typed-event - some description for typed-event
 * @event {MyType} typed-custom-event - some description for typed-custom-event
 *
 * @summary This is MyElement
 *
 * @tag my-element
 * @tagname my-element
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

문제

문제는 JSDoc 태그를 두 배로 늘리고 @deprecated 태그를 사용하여 이러한 항목이 더 이상 사용되지 않음을 나타낼 수 없다는 것입니다. 그렇지 않으면 전체 클래스가 더 이상 사용되지 않는 것으로 해석됩니다.

/**
 * @cssprop --text-color - @deprecated I dub thee "deprecated" ❌
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

해결책

이 문제를 해결하기 위해 JSDoc의 항목에 태그를 지정하여 해당 항목이 맞춤 요소 매니페스트에서 적절하게 업데이트되도록 하는 도구(custom-elements-manifest-deprecator)를 만들었습니다.

이 도구를 사용하면 대체 태그를 사용하여 더 이상 사용되지 않는 API를 식별할 수 있습니다. 기본적으로 괄호로 묶인 @deprecated 태그를 식별자로 사용하지만(오늘 사용할 태그) 원하는 대로 사용자 정의할 수 있습니다.

/**
 * @cssprop --text-color - (@deprecated) I dub thee "deprecated" ?
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

API 업데이트

우리 팀에게 중요한 점은 API를 제거하거나 변경할 때 팀이 조기에 해당 기능으로 마이그레이션할 수 있도록 다음 주요 릴리스 전에 새로운 기능을 도입하려고 노력한다는 것입니다. 이렇게 하면 최신 상태를 유지하면 새 버전으로 업그레이드하는 데 따른 영향을 최소화할 수 있습니다.

다음 섹션에서는 기존 API를 손상시키지 않고 새로운 기능을 도입하는 방법과 서로 경쟁하지 않고 공존할 수 있는 방법을 살펴보겠습니다. 간단한 버튼 구성요소에 대한 일부 API를 업데이트할 예정입니다.

이 예에서는 Lit를 사용하지만 이러한 기능과 원리는 모든 환경에 적용될 수 있습니다.

CSS 변수

VS Code 및 JetBrains와 같은 편집기에서 더 나은 자동 완성 및 설명을 제공하려면 구성 요소별 CSS 변수 이름을 제공해야 합니다.

/**
  * @deprecated This component is going away. Use ... instead.
  */
class MyElement extends HTMLElement {
  /** @deprecated This property is being removed. Use ... instead. */
  myProp;

  /** @deprecated This method is going away. Use ... instead. */
  myMethod() {
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사

까다로운 부분은 팀이 이미 이전 변수를 사용하고 있으므로 작동하려면 둘 다 필요하다는 것입니다. 더 이상 사용되지 않는 변수를 새 변수에 매핑하고 해당 변수만 사용하도록 버튼 코드를 업데이트하면 됩니다. 이렇게 하면 사용자가 더 이상 사용되지 않는 변수로 스타일을 지정하는 경우 해당 변수가 새 변수에 적용되거나 사용자가 새 변수에 직접 값을 적용할 수 있습니다.

/**
 * @attr {boolean} disabled - disables the element
 * @attribute {string} foo - description for foo
 *
 * @csspart bar - Styles the bar element in the shadow DOM
 *
 * @slot - This is a default/unnamed slot
 * @slot container - You can put some elements here
 *
 * @cssprop --text-color - Controls the color of foo
 * @cssproperty [--background-color=red] - Controls the background color of bar
 *
 * @prop {boolean} prop1 - some description
 * @property {number} prop2 - some description
 *
 * @fires custom-event - some description for custom-event
 * @fires {MyType} typed-event - some description for typed-event
 * @event {MyType} typed-custom-event - some description for typed-custom-event
 *
 * @summary This is MyElement
 *
 * @tag my-element
 * @tagname my-element
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 새로운 CSS 변수로 JSDoc 정보를 업데이트하고 업데이트된 설명과 함께 이전 변수에 (@deprecated)를 추가할 수 있습니다.

/**
 * @cssprop --text-color - @deprecated I dub thee "deprecated" ❌
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

CSS 부분

CSS 변수와 마찬가지로 더 나은 도구 지원을 위해 부품에 네임스페이스 이름을 제공하려고 하므로 컨트롤을 버튼 컨트롤로 대체할 예정입니다. CSS 클래스처럼 요소에 여러 부분을 적용할 수 있으므로 CSS 부분은 매우 쉽습니다. 따라서 새 부분 이름을 다른 요소와 함께 요소에 적용해 보겠습니다.

/**
 * @cssprop --text-color - (@deprecated) I dub thee "deprecated" ?
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 JSDoc을 새 부분으로 업데이트하고 (@deprecated)를 사용하여 이전 부분을 지원 중단하고 설명을 업데이트할 수 있습니다.

/* old variables */
--bg-color: #ccc;
--fg-color: black;

/* new variables */
--button-bg-color: #ccc;
--button-fg-color: black;
로그인 후 복사

슬롯

국제화(i18n)를 지원하기 위한 구성 요소에 대한 새로운 계획을 통해 우리는 일부 API를 RTL(오른쪽에서 왼쪽으로) 언어에서 더욱 의미 있게 업데이트하고 있습니다. 우리가 하고 싶은 한 가지는 이미 왼쪽 슬롯을 사용하고 있는 프로젝트의 경험을 방해하지 않고 왼쪽부터 버튼 텍스트 앞에 아이콘을 표시하도록 슬롯을 업데이트하는 것입니다.

이를 수행하려면 더 이상 사용되지 않는 슬롯을 새 슬롯 내에 중첩하면 됩니다. 새 슬롯을 사용하지 않는 경우 기존 슬롯으로 "대체"됩니다.

--bg-color: #ccc;
--fg-color: black;
--button-bg-color: var(--bg-color);
--button-fg-color: var(--fg-color);

button {
  background-color: var(--button-bg-color);
  border: solid 1px var(--button-fg-color);
  color: var(--button-fg-color);
}
로그인 후 복사

이제 JSDoc을 새 슬롯으로 업데이트하고 (@deprecated)를 사용하여 이전 슬롯을 지원 중단하고 설명을 업데이트할 수 있습니다.

/**
 * An example button element.
 *
 * @tag my-button
 * 
 * @cssprop [--bg-color=#ccc] - (@deprecated) (use `--button-bg-color` instead) controls the background color of the button
 * @cssprop [--fg-color=black] - (@deprecated) (use `--button-fg-color` instead) controls the foreground/text color of the button
 * @cssprop [--button-bg-color=#ccc] - controls the background color of the button
 * @cssprop [--button-fg-color=black] - controls the foreground/text color of the button
 *
 */
로그인 후 복사

이벤트

예를 들어 사용자 정의 포커스 이벤트를 내보내고 있지만 팀에 혼란을 주고 있으므로 네임스페이스 이벤트(my-focus)를 추가하려고 합니다. 이벤트는 두 이벤트를 모두 내보낼 수 있고 개발자가 기회가 있을 때 새 이벤트로 이동할 수 있으므로 매우 간단합니다.

<button part="control button-control">
  <slot></slot>
</button>
로그인 후 복사

이제 JSDoc을 새 이벤트로 업데이트하고 (@deprecated)를 사용하여 이전 이벤트를 지원 중단하고 설명을 업데이트할 수 있습니다.

/**
 * An example button element.
 *
 * @tag my-button
 *
 * @csspart control - (@deprecated) (use `button-control` instead) provides a hook to style internal button element
 * @csspart button-control - provides a hook to style internal button element
 */
로그인 후 복사

참고: 대부분의 도구는 이벤트 문서화를 위해 @event 및 @fires를 허용합니다. 실제로는 별 차이가 없습니다.

행동 양식

메서드는 서로 병렬로 추가하기가 매우 쉽고 메소드 설명에 표준 @deprecated 태그를 사용하여 더 이상 사용되지 않음을 전달할 수 있습니다.

/**
  * @deprecated This component is going away. Use ... instead.
  */
class MyElement extends HTMLElement {
  /** @deprecated This property is being removed. Use ... instead. */
  myProp;

  /** @deprecated This method is going away. Use ... instead. */
  myMethod() {
  }
}
로그인 후 복사
로그인 후 복사
로그인 후 복사

속성 및 속성

속성과 속성은 @attr/@attribute 및 @prop/@property 태그를 사용하여 클래스의 JSDoc에 문서화될 수 있습니다. 이를 사용하는 경우 (@deprecated) 태그를 사용하여 사용자 정의 요소 매니페스트에서 해당 속성을 더 이상 사용하지 않을 수 있지만 일반적으로 자체 JSDoc 주석을 사용하여 속성을 직접 문서화하는 것이 더 좋습니다. 이를 통해 유형 및 기타 도구를 사용하여 더 이상 사용되지 않는 API를 올바르게 식별할 수 있습니다.

좋은 점은 대부분의 분석기가 데코레이터 또는 기타 구성을 사용하여 구성 요소 클래스에 정의된 속성과 속성을 연결하는 데 매우 능숙하다는 것입니다. 따라서 해당 속성을 더 이상 사용하지 않으면 연관된 속성도 더 이상 사용되지 않습니다.

데모 구성 요소에는 기본 HTML 요소와 더 일치하도록 비활성화로 업데이트하려는 비활성화 속성이 있습니다.

가장 먼저 할 일은 이전 속성을 지원 중단하고 새 속성을 추가하는 것입니다.

/**
 * @attr {boolean} disabled - disables the element
 * @attribute {string} foo - description for foo
 *
 * @csspart bar - Styles the bar element in the shadow DOM
 *
 * @slot - This is a default/unnamed slot
 * @slot container - You can put some elements here
 *
 * @cssprop --text-color - Controls the color of foo
 * @cssproperty [--background-color=red] - Controls the background color of bar
 *
 * @prop {boolean} prop1 - some description
 * @property {number} prop2 - some description
 *
 * @fires custom-event - some description for custom-event
 * @fires {MyType} typed-event - some description for typed-event
 * @event {MyType} typed-custom-event - some description for typed-custom-event
 *
 * @summary This is MyElement
 *
 * @tag my-element
 * @tagname my-element
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 구성요소가 비활성화되었는지 확인해야 할 때마다 두 속성을 모두 확인하지 않아도 됩니다. 이를 단순화하기 위해 더 이상 사용되지 않는 속성을 getter/setter로 변환하고 새 속성을 정보 소스로 사용할 수 있습니다.

/**
 * @cssprop --text-color - @deprecated I dub thee "deprecated" ❌
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

이제 이전 값이 업데이트될 때마다 새 값이 자동으로 업데이트되므로 새 속성만 확인하여 구성요소가 비활성화되었는지 확인하면 됩니다.

/**
 * @cssprop --text-color - (@deprecated) I dub thee "deprecated" ?
 */
class MyElement extends HTMLElement {}
로그인 후 복사
로그인 후 복사
로그인 후 복사

완성된 예시를 확인해보세요!

Deprecating Your Web Component APIs

결론

API를 변경하면 복잡해질 수 있지만, 획기적인 변경이 포함될 수 있으므로 새로운 기능 생성을 중단해야 한다는 의미는 아닙니다. 새로운 기능을 조기에 도입하고 기존 기능을 더 이상 사용하지 않는 것은 좋은 개발자 경험(DX)을 제공하는 방법이 될 수 있습니다. 이는 팀이 새로운 기능을 활용하기 위해 한꺼번에 대규모 변경을 기다리도록 강요하는 대신 점진적인 개선의 길을 제공합니다.

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Nordhold : Fusion System, 설명
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

정적 양식 공급자의 비교 정적 양식 공급자의 비교 Apr 16, 2025 am 11:20 AM

"정적 양식 공급자"라는 용어를 동전하려고합시다. 당신은 당신의 HTML을 가져옵니다

Sass를 더 빨리 만들기위한 개념 증명 Sass를 더 빨리 만들기위한 개념 증명 Apr 16, 2025 am 10:38 AM

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

주간 플랫폼 뉴스 : HTML로드 속성, 주요 ARIA 사양 및 iframe에서 Shadow Dom으로 이동 주간 플랫폼 뉴스 : HTML로드 속성, 주요 ARIA 사양 및 iframe에서 Shadow Dom으로 이동 Apr 17, 2025 am 10:55 AM

이번 주에 플랫폼 뉴스 라운드 업 RONDUP, Chrome은로드에 대한 새로운 속성, 웹 개발자를위한 접근성 사양 및 BBC Move를 소개합니다.

HTML 대화 요소와 함께 일부 실습 HTML 대화 요소와 함께 일부 실습 Apr 16, 2025 am 11:33 AM

이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다

PaperForm PaperForm Apr 16, 2025 am 11:24 AM

구매 또는 빌드는 기술 분야의 고전적인 논쟁입니다. 신용 카드 청구서에 라인 항목이 없기 때문에 물건을 구축하는 것이 저렴할 수 있지만

'Podcast 구독'링크는 어디에서 링크해야합니까? 'Podcast 구독'링크는 어디에서 링크해야합니까? Apr 16, 2025 pm 12:04 PM

한동안 iTunes는 팟 캐스팅에서 큰 개 였으므로 "Podcast 구독"을 링크 한 경우 다음과 같습니다.

주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기 주간 플랫폼 뉴스 : 텍스트 간격 북마크, 최상위 차단, 새로운 앰프 로딩 표시기 Apr 17, 2025 am 11:26 AM

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

직접 비자 스크립트 기반 분석을 호스팅하는 옵션 직접 비자 스크립트 기반 분석을 호스팅하는 옵션 Apr 15, 2025 am 11:09 AM

사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석

See all articles