CSS 속성 및 값 API 레벨 1

1. 소개

CSS는 웹 문서의 레이아웃, 페인팅 또는 동작을 수정하기 위해 조작할 수 있는 포괄적인 속성 집합을 정의합니다. 하지만 웹 저자들은 이 속성 집합을 추가적인 속성으로 확장하고 싶어하는 경우가 많습니다.

[css-variables]는 사용자가 제어할 수 있는 속성을 정의할 수 있는 원시적인 방법을 제공합니다. 그러나 이러한 속성은 항상 토큰 리스트를 값으로 사용하고, 항상 상속되어야 하며, var() 참조를 통해 다른 속성의 값에 다시 통합될 때만 문서의 레이아웃이나 페인팅에 영향을 줄 수 있습니다.

이 명세는 [css-variables]를 확장하여, 값 타입, 초기 값, 정의된 상속 동작을 갖는 속성을 두 가지 방법을 통해 등록할 수 있도록 합니다:

• JS API, registerProperty() 메서드

• CSS at-rule, @property 규칙

이 명세는 [css-paint-api-1] 및 [css-layout-api-1]와 보완적으로 동작합니다. 이 명세들은 사용자 정의 속성이 각각 페인팅 또는 레이아웃 동작에 직접 영향을 줄 수 있게 해줍니다.

2. 등록된 사용자 정의 속성

사용자 정의 속성은 등록된 사용자 정의 속성이 될 수 있습니다. 등록되면 UA(사용자 에이전트)가 정의한 속성처럼 동작하며, UA가 검증하는 구문, 초기 값, 특정 상속 동작을 갖게 됩니다. 이는 @property 규칙이나, registerProperty() JS 함수를 통해 가능합니다.

사용자 정의 속성은 Document에 대해 다음 중 하나에 해당하면 등록된 것으로 간주됩니다: 문서의 스타일시트 중 하나에 이름에 대해 유효한 @property 규칙이 정의되어 있거나, 이름이 문서의 [[registeredPropertySet]] 슬롯에 포함되어 있을 때 (registerProperty() 로 등록된 경우).

등록된 사용자 정의 속성은 등록되지 않은 사용자 정의 속성과 유사하게 동작하지만, 아래에서 정의된 점이 다릅니다.

2.1. 등록 여부 결정

등록된 사용자 정의 속성은 사용자 정의 속성 등록 정보를 가지며, 실제 속성처럼 처리하기 위한 모든 데이터를 포함합니다. 이는 다음으로 구성된 구조체입니다:

• 속성 이름 (사용자 정의 속성 이름 문자열)

• 구문 (구문 문자열)

• 상속 플래그 (불리언)

• 선택적으로 초기 값 (문자열, 구문에 따라 성공적으로 파싱되는 값)

만약 Document의 [[registeredPropertySet]] 슬롯이 포함하는 레코드에 사용자 정의 속성의 이름이 있다면, 등록 정보는 해당 레코드입니다.

그렇지 않으면, Document의 활성 스타일시트에 이름에 대해 유효한 @property 규칙이 하나 이상 있다면, 문서 순서상 마지막 규칙이 등록 정보가 됩니다.

그 밖에는 등록 정보가 없으며, 사용자 정의 속성은 등록된 사용자 정의 속성이 아닙니다.

2.2. 구문 분석 시 동작

등록된 사용자 정의 속성은 등록되지 않은 사용자 정의 속성과 동일하게 구문 분석됩니다. 거의 모든 값이 허용됩니다. 등록된 속성의 구문은 구문 분석 시점에 검사되지 않습니다.

참고: 다만, 구문은 계산 값 시점에 var()로 치환되기 전에 검사됩니다. § 2.4 계산 값 시점 동작을 참조하십시오.

2.3. 지정 값 처리 시 동작

등록되지 않은 사용자 정의 속성과 마찬가지로, 모든 등록된 사용자 정의 속성은 등록된 구문과 관계없이, CSS 전체 키워드(예: inherit 또는 revert)를 허용합니다. 동작은 CSS Cascading 4 § 7.3 명시적 기본값 지정에서 정의되어 있습니다.

2.4. 계산 값 처리 시 동작

등록된 사용자 정의 속성의 계산 값은 등록 정보의 구문에 의해 결정됩니다.

만약 등록 정보의 구문이 범용 구문 정의라면, 계산 값은 등록되지 않은 사용자 정의 속성과 동일합니다 (변수가 치환된 지정 값 또는 보장된-잘못된 값).

그 외의 경우, 등록된 구문에 따라 속성 값을 파싱하려 시도합니다. 실패하면, 선언은 계산 값 시점에 잘못된 값이 되며, 계산 값은 이에 따라 결정됩니다. 성공하면, 계산 값은 구문의 종류에 따라 달라집니다:

"<length>", "<length-percentage>", "<angle>", "<time>", "<resolution>", "<integer>", "<number>", 그리고 "<percentage>" 값의 경우:

• 지정 값이 치수 리터럴 (예: 50em 또는 .2s)이면, 계산 값은 같은 값이지만 단위가 해당 타입의 정식 단위로 변환됩니다.

• 지정 값이 다른 숫자 리터럴 (예: 5 또는 20%)이면, 계산 값은 지정 값 그대로입니다. (특히, %는 어떤 값에도 절대적으로 해석되지 않습니다.)

• 지정 값이 해당 타입으로 평가되는 함수 (예: 수학 함수)이면, 계산 값은 해당 함수에 의해 정의됩니다.

"<color>" 값의 경우, 값은 색상 값을 해석하여 계산되며, CSS Color 4 § 14. <color> 값 해석에 따릅니다.

"<custom-ident>", ident, 또는 "*" 값의 경우, 계산 값은 지정 값 그대로입니다.

"<url>" 값의 경우, 계산 값은 다음 중 하나입니다:

• URL이 상대 경로일 경우, 계산 값은 [css3-values]에 설명된 대로 해석된 절대 URL입니다.

• 그 외에는 계산 값이 지정 값 그대로입니다.

div {
  --url-foo: url("foo.png");
}

div {
  --url-bar: url("bar.png");
}

<link href="/style/foo/foo.css" rel="stylesheet" type="text/css">
<link href="/style/bar/bar.css" rel="stylesheet" type="text/css">
<div style="background-image: var(--url-foo), var(---url-bar);">
</div>

"<image>" 값의 경우, 계산 값은 계산된 <image>입니다.

"<transform-function>" 및 "<transform-list>" 값의 경우, 계산 값은 모든 길이가 계산된 값으로 해석된 지정 값입니다.

반복자가 있는 구문의 경우, 계산 값은 기본 타입의 계산 값 리스트입니다.

| 조합자로 명시된 구문의 경우, 값을 만족시키는 첫 번째 절의 계산 값 규칙을 적용하여 계산 값을 얻습니다.

2.5. 애니메이션 동작

참고: [css3-animations] 및 [css3-transitions]에서 정의된 것처럼, 사용자 정의 속성을 참조하는 애니메이션 및 트랜지션을 지정할 수 있습니다.

애니메이션과 트랜지션에서 참조될 때, 사용자 정의 속성 값은 파싱된 타입에 따라 보간되며 계산 값 기준으로 동작합니다.

참고: <color>+ 또는 <color>#와 같은 값 목록은 각 구성요소를 인덱스별로 맞춰 단순 리스트로 보간되며, 구성요소의 수가 일치하지 않으면 보간이 실패합니다.

위 규칙의 예외로, 값이 <transform-list>, <transform-function>, 또는 <transform-function>+로 파싱된 경우에는 transform 속성의 방식으로 보간됩니다.

참고: 만약 어떤 이유로든 사용자 정의 속성이 <transform-function># 구문으로 정의된 경우, 먼저 단순 리스트로 보간되고, 이후 각 리스트 항목이 transform 값으로 보간됩니다.

참고: 사용자 정의 속성을 등록(또는 등록을 변경)하면 계산 값이 바뀔 수 있으며, 이는 CSS 트랜지션을 시작하거나 중단시킬 수 있습니다.

2.6. 조건부 규칙

§ 2.2 구문 분석 시 동작에서 설명한 것처럼, 등록되지 않은 속성과 등록된 사용자 정의 속성 모두 파싱 시 거의 모든 값을 허용합니다. 등록된 사용자 정의 속성은 계산 값 시점에만 구문이 적용됩니다.

따라서 모든 사용자 정의 속성은, 등록 여부와 관계없이, @supports 규칙에서 "true"로 판정됩니다. 단, 사용자 정의 속성의 (매우 자유로운) 일반 구문을 위반하지 않아야 합니다.

2.7. var()를 통한 치환

등록되지 않은 사용자 정의 속성처럼, 등록된 사용자 정의 속성의 값도 var() 함수로 다른 값에 치환할 수 있습니다. 하지만 등록된 사용자 정의 속성은 원래 토큰 시퀀스가 아니라 계산 값으로서 치환됩니다.

등록된 사용자 정의 속성을 참조하는 var() 함수는 반드시 동등한 토큰 시퀀스로 대체되어야 하며, 이는 계산 값이 직렬화된 후 토큰화된 문자열과 동일합니다.

div {
  font-size: 10px;
  --x: 8em;
  --y: var(--x);
}

2.7.1. var() 참조의 폴백

var() 함수를 사용해 등록된 사용자 정의 속성을 참조할 때는 폴백을 제공할 수 있습니다. 하지만 폴백 값은 참조하는 사용자 정의 속성의 구문 정의와 일치해야 하며, 그렇지 않으면 선언이 계산 값 시점에 잘못된 값이 됩니다.

참고: 폴백이 실제로 사용되는지 여부와 관계없이 이 규칙이 적용됩니다.

2.7.2. 상대 단위를 통한 의존성 순환

등록된 사용자 정의 속성은 등록되지 않은 사용자 정의 속성과 동일한 의존성 순환 해결 규칙을 따르지만, 다음과 같은 추가 제약이 있습니다:

다음과 같은 구문 구성요소(<length> 또는 <length-percentage>)를 가진 등록된 사용자 정의 속성의 경우:

• 속성에 다음 단위 중 하나가 포함되면: em, ex, cap, ch, ic, lh; 속성과 현재 요소의 font-size 사이에 엣지를 추가합니다.

• 속성에 lh 단위가 포함되면, 속성과 현재 요소의 line-height 사이에 엣지를 추가합니다.

• 속성에 다음 단위 중 하나가 포함되면: rem, rlh; 속성과 루트 요소의 font-size 사이에 엣지를 추가합니다.

• 속성에 rlh 단위가 포함되면, 속성과 루트 요소의 line-height 사이에 엣지를 추가합니다.

CSS.registerProperty({
  name: "--my-font-size",
  syntax: "<length>",
  initialValue: "0px",
  inherits: false
});

div {
  --my-font-size: 10em;
  font-size: var(--my-font-size);
}

2.8. 섀도우 DOM

CSS의 많은 개념과 달리 (CSS Scoping 1 § 3.5 이름 정의 구조와 상속 참고), 속성 등록은 트리 범위에 한정되지 않습니다. 모든 등록은, 최상위 문서에 있든 섀도우 트리 내부에 있든, Document의 단일 글로벌 등록 맵에서 상호작용합니다.

사용자 정의 속성이 섀도우 DOM 기반 컴포넌트의 공개 API 일부로 노출되는 경우, 이 글로벌 등록 동작은 의도대로 동작합니다. 외부 페이지가 동일한 이름의 사용자 정의 속성을 다른 목적으로 사용하면, 이미 충돌이 발생하는 상황이므로 등록 동작이 문제를 더 악화시키지는 않습니다.

컴포넌트의 내부 전용 목적으로 사용자 정의 속성을 사용할 경우, 다른 컨텍스트와의 충돌 가능성을 최소화하기 위해 속성에 고유할 가능성이 높은 이름을 사용하는 것이 권장됩니다. 예를 들어, 프로젝트 이름이나 짧은 임의 문자열을 속성 이름에 포함시키는 방법이 있습니다.

3. @property 규칙

@property 규칙은 JS를 실행하지 않고도 스타일시트에서 직접 사용자 정의 속성 등록 정보를 나타냅니다. 유효한 @property 규칙은 등록된 사용자 정의 속성이 되며, registerProperty()가 동일한 매개변수로 호출된 것과 동일하게 동작합니다.

@property의 구문은 다음과 같습니다:

@property <custom-property-name> {
  <declaration-list>
}

유효한 @property 규칙은 사용자 정의 속성 등록 정보를 나타내며, 속성 이름은 규칙의 프렐루드에 있는 <custom-property-name>의 직렬화 값입니다.

@property 규칙에는 syntax 및 inherits 디스크립터가 반드시 필요합니다; 둘 중 하나라도 없으면 전체 규칙은 무효이며 무시되어야 합니다. initial-value 디스크립터는 구문이 범용 구문 정의일 때만 선택적으로 생략할 수 있고, 그 외에는 반드시 필요합니다; 없으면 전체 규칙은 무효이며 무시되어야 합니다.

알 수 없는 디스크립터는 무효이며 무시되지만, @property 규칙 자체를 무효화하지는 않습니다.

참고: § 2.1 등록 여부 결정에서 명시된 것처럼, 동일한 <custom-property-name>에 대해 여러 개의 유효한 @property 규칙이 정의되어 있으면, 스타일시트 순서상 마지막 규칙이 "승리"합니다. CSS.registerProperty()로 등록된 정보는 동일한 <custom-property-name>에 대해 어떠한 @property 규칙보다 우선합니다.

3.1. syntax 디스크립터

@property 규칙이 나타내는 사용자 정의 속성 등록 정보의 구문을 지정하며, 속성 값이 계산 값 시점에 어떻게 파싱되는지 제어합니다.

syntax 디스크립터는 @property 규칙이 유효하려면 반드시 필요합니다; 없으면 @property 규칙은 무효입니다.

제공된 문자열이 구문 문자열로 유효하지 않으면 (해당 문자열에 대해 구문 정의 소비를 호출하면 실패가 반환되는 경우), 해당 디스크립터는 무효이며 무시되어야 합니다.

3.2. inherits 디스크립터

custom property registration의 상속 플래그를 지정하며, @property 규칙을 통해 속성이 기본적으로 상속되는지 여부를 제어합니다.

inherits 디스크립터는 @property 규칙이 유효하려면 반드시 필요합니다; 없으면 @property 규칙은 무효입니다.

3.3. initial-value 디스크립터

custom property registration의 초기값을 지정하며, @property 규칙을 통해 속성의 초기값을 제어합니다.

syntax 디스크립터의 값이 범용 구문 정의라면, initial-value 디스크립터는 선택사항입니다. 생략된 경우 속성의 초기값은 guaranteed-invalid value입니다.

그 외의 경우, syntax 디스크립터의 값이 범용 구문 정의가 아니라면, @property 규칙이 유효하려면 다음 조건을 만족해야 합니다:

• initial-value 디스크립터가 반드시 존재해야 합니다.

• initial-value 디스크립터의 값은 해당 구문 정의의 문법에 따라 성공적으로 파싱되어야 합니다.

• initial-value는 계산적으로 독립적이어야 합니다.

위 조건을 만족하지 않으면 @property 규칙은 무효입니다.

4. JS에서 사용자 정의 속성 등록

JS를 통해 사용자 정의 속성을 등록하려면, CSS 객체에 registerProperty() 메서드가 추가됩니다:

dictionary PropertyDefinition {
  required DOMString name;
           DOMString syntax       = "*";
  required boolean   inherits;
           DOMString initialValue;
};

partial namespace CSS {
  undefined registerProperty(PropertyDefinition definition);
};

추가적으로, Document 객체에는 [[registeredPropertySet]] 라는 새로운 private 슬롯이 추가되며, 이는 등록된 사용자 정의 속성을 설명하는 레코드 집합입니다.

4.1. registerProperty() 함수

registerProperty(PropertyDefinition definition) 메서드는 definition에 지정된 설정 옵션에 따라 사용자 정의 속성을 등록합니다. 호출될 때, definition 인자의 옵션들을 동일한 이름의 인자로 넘겨 register a custom property 알고리즘을 실행합니다.

속성 값이 계산적으로 독립적이란, 오직 해당 요소의 속성 값과 "CSS로 변경할 수 없는" 글로벌 정보만으로 계산 값으로 변환할 수 있는 경우를 의미합니다.

사용자 정의 속성이 특정 타입으로 등록되면, 해당 속성의 지정 값이 계산 값으로 변환되는 과정은 선택된 타입에 의해 완전히 정의되며, § 2.4 계산 값 처리 동작에 설명되어 있습니다.

참고: 속성을 등록 해제하는 방법은 추후 추가될 수 있습니다.

사용자 정의 속성 등록은 cascade에 절대 영향을 주지 않아야 합니다. 등록된 속성에 어떤 구문이 지정되었든, 파싱 시점에는 여전히 사용자 정의 속성의 일반 파싱 방식으로 처리되며, 거의 모든 값을 허용합니다. specified value가 등록된 구문을 위반하면, 해당 속성은 계산 값 시점에 잘못된 값이 되어 등록된 초기값으로 리셋됩니다.

.thing {
  --my-color: green;
  --my-color: url("not-a-color");
  color: var(--my-color);
}

CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  initialValue: "black",
  inherits: false
});

4.2. PropertyDefinition 딕셔너리

PropertyDefinition 딕셔너리는 사용자 정의 속성에 대해 저자가 지정한 설정 옵션을 나타냅니다. PropertyDefinition 딕셔너리에는 다음 멤버가 포함됩니다:

name, 타입 DOMString

정의되는 사용자 정의 속성의 이름입니다.

syntax, 타입 DOMString, 기본값 "*"

이 사용자 정의 속성이 어떻게 파싱되는지 나타내는 문자열입니다.

inherits, 타입 boolean

이 사용자 정의 속성이 DOM 트리에서 상속되어야 한다면 true, 그렇지 않으면 false입니다.

initialValue, 타입 DOMString

이 사용자 정의 속성의 초기값입니다.

5. 구문 문자열

구문 문자열은 등록된 사용자 정의 속성이 허용하는 값 타입을 설명합니다. 구문 문자열은 구문 구성요소 이름으로 이루어져 있으며, 선택적으로 반복자와 조합자로 결합할 수 있습니다.

구문 문자열은 구문 정의로 파싱될 수 있으며, 이는 다음 중 하나입니다:

1. 구문 구성요소 리스트. 각각 § 5.1 지원되는 이름에서 지정된 값 타입을 허용합니다.

2. 범용 구문 정의 (*)로, 모든 유효한 토큰 스트림을 허용합니다.

참고: 지정된 구문과 관계없이 모든 사용자 정의 속성은 CSS 전체 키워드를 허용하며, 이에 맞게 값을 처리합니다.

참고: 구문 문자열의 내부 문법은 CSS 값 정의 문법의 부분집합입니다. 향후 명세에서는 허용되는 문법의 복잡성이 더 확대되어, 사용자 정의 속성이 CSS 속성 전체와 더 유사하게 동작할 수 있을 것입니다.

이 장의 나머지 부분에서는 구문 문자열의 내부 문법을 설명합니다.

5.1. 지원되는 이름

이 섹션에서는 지원되는 구문 구성요소 이름과, 결과적으로 생성되는 구문 구성요소가 허용하는 타입을 정의합니다.

"<length>"

모든 유효한 <length> 값

"<number>"

<number> 값

"<percentage>"

모든 유효한 <percentage> 값

"<length-percentage>"

모든 유효한 <length> 또는 <percentage> 값, 그리고 <calc()> 표현식에서 <length>와 <percentage> 구성요소를 결합한 값.

"<color>"

모든 유효한 <color> 값

"<image>"

모든 유효한 <image> 값

"<url>"

모든 유효한 <url> 값

"<integer>"

모든 유효한 <integer> 값

"<angle>"

모든 유효한 <angle> 값

"<time>"

모든 유효한 <time> 값

"<resolution>"

모든 유효한 <resolution> 값

"<transform-function>"

모든 유효한 <transform-function> 값

"<custom-ident>"

모든 유효한 <custom-ident> 값

식별자 시작이 가능한 시퀀스, 이름으로 소비 가능하고, <custom-ident> 생산식에 일치하는 경우

그 식별자

참고: <custom-ident>들은 서로 코드포인트 단위로 비교합니다; 이는 UA 정의 CSS의 일반 동작(ASCII만 제한, ASCII 대소문자 무시)과 다릅니다. 예를 들어, Red를 지정하면 정확히 그 값만 허용되며 Red, red, RED 등은 일치하지 않습니다. CSS 규칙과 맞추기 위해 ident는 ASCII로 제한하고 소문자로 작성하는 것이 권장됩니다.

"<transform-list>"

유효한 <transform-function> 값 리스트. "<transform-list>"는 사전-반복된 데이터 타입 이름으로 "<transform-function>+"와 동일합니다.

참고: 구문 문자열 "*"는 범용 구문 정의를 생성하며, 이는 구문 구성요소가 아닙니다. 따라서 "*"는 어떤 것과도 반복자나 조합자로 결합할 수 없습니다.

5.2. '+' 및 '#' 반복자

구문 구성요소 이름 중 사전-반복된 데이터 타입 이름을 제외한 모든 이름은 반복자를 바로 뒤에 붙일 수 있습니다:

U+002B 플러스 기호 (+)

공백으로 구분된 리스트를 나타냅니다.

U+0023 샵 기호 (#)

콤마로 구분된 리스트를 나타냅니다.

참고: 반복자는 반드시 반복될 구문 구성요소 이름 바로 뒤에 붙어야 합니다.

5.3. '|' 조합자

구문 문자열은 U+007C 세로줄 (|)로 여러 구문 구성요소 이름을 제공할 수 있습니다. 이런 구문 문자열은 구문 정의에서 여러 구문 구성요소를 가지게 됩니다.

여러 구문 구성요소가 있는 구문 정의로 CSS 값을 파싱할 때, 지정된 순서대로 구성요소를 매칭합니다.

참고: 예를 들어, 구문 문자열 "red | <color>"에서는, 값 red는 식별자로 파싱되고, 값 blue는 <color>로 파싱됩니다.

5.4. 구문 문자열 파싱

5.4.1. 정의

데이터 타입 이름

U+003C LESS-THAN SIGN (<)으로 시작하고 0개 이상의 ident 코드포인트로 이어지며, U+003E GREATER-THAN SIGN (>)으로 끝나는 코드포인트 시퀀스입니다.

사전-반복된 데이터 타입 이름

데이터 타입 이름에서 구문 구성요소에 이미 반복자가 포함된 경우입니다.

구문 구성요소

구문 구성요소 이름과 선택적으로 반복자로 구성된 객체입니다.

구문 구성요소 이름

코드포인트 시퀀스로, 데이터 타입 이름 또는 <custom-ident>을 생성할 수 있는 시퀀스입니다.

구문 정의

구문 구성요소 리스트로 구성된 객체입니다.

범용 구문 정의

모든 유효한 토큰 스트림을 허용하는 특수 구문 정의입니다.

5.4.2. 구문 정의 소비

5.4.3. 구문 구성요소 소비

5.4.4. 데이터 타입 이름 소비

6. CSSOM

6.1. CSSPropertyRule 인터페이스

CSSPropertyRule 인터페이스는 @property 규칙을 표현합니다.

[Exposed=Window]
interface CSSPropertyRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CSSOMString syntax;
  readonly attribute boolean inherits;
  readonly attribute CSSOMString? initialValue;
};

name, 타입 CSSOMString, 읽기 전용

@property 규칙과 연관된 사용자 정의 속성 이름.

syntax, 타입 CSSOMString, 읽기 전용

@property와 연관된 구문(명시된 그대로).

inherits, 타입 boolean, 읽기 전용

@property 규칙과 연관된 inherits 디스크립터.

initialValue, 타입 CSSOMString, 읽기 전용, nullable

@property 규칙과 연관된 초기값(없을 수도 있음).

6.2. CSSStyleValue 실체화

7. 예시

7.1. 예시 1: 사용자 정의 속성을 사용한 애니메이션 동작 추가

<script>
CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "rgba(0,0,0,0)"
});
</script>

<style>
.button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

.button:hover {
  --stop-color: green;
}
</style>

7.2. 예시 2: @property를 사용한 속성 등록

<script>
  CSS.paintWorklet.addModule('circle.js');
</script>
<style>
  @property --radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  div {
    width: 100px;
    height: 100px;
    --radius: 10px;
    background: paint(circle);
    transition: --radius 1s;
  }

  div:hover {
    --radius: 50px;
  }
</style>
<div></div>

// circle.js
registerPaint('circle', class {
    static get inputProperties() { return ['--radius']; }
    paint(ctx, geom, properties) {
      let radius = properties.get('--radius').value;
      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(geom.width / 2, geom.height / 2, radius, 0, 2 * Math.PI);
      ctx.fill();
    }
});

8. 보안 고려 사항

이 기능들로 인해 알려진 보안 이슈는 없습니다.

9. 프라이버시 고려 사항

이 기능들로 인해 알려진 프라이버시 이슈는 없습니다.

10. 변경 사항

10.1. 2020년 10월 13일 워킹 드래프트 이후 변경 사항

/* 2024년 3월 20일까지 */

• "initial-value"가 <declaration-value>?를 가지도록 변경, 사용자 정의 속성과 동일하게 함. (#9078)

• Shadow 트리에서도 @Property 허용. (#1085)

• 속성 등록이 글로벌(전역)이고 shadow-scoped가 아닌 이유를 설명하는 섹션 추가.

• 다른 명세서에서 사용할 수 있도록 "registered custom property"와 "universal syntax definition" 용어를 내보냄. (#1020)

• "guaranteed-invalid value" 대신 "invalid at computed-value time" 용어 사용.