如何返回CSS.registerProperty()的属性

huangapple go评论102阅读模式
英文:

How to return the properties of CSS.registerProperty()

问题

I have registered a property through the CSS.registerProperty method. The problem is that when I load the same component a DOMException is thrown because such a property already exists.

I am looking for a way to know if there is a getter for properties or similar.

Run in a vue3 component.

  1. onMounted(() => {
  2. try {
  3. window.CSS.registerProperty({
  4. name: "--num",
  5. syntax: "<integer>",
  6. inherits: false,
  7. initialValue: 0,
  8. });
  9. } catch (error) {
  10. if(error instanceof DOMException){
  11. console.log(error)
  12. }
  13. }
  14. }

That's the error -> DOMException: Failed to execute 'registerProperty' on 'CSS': The name provided has already been registered.

英文:

I have registered a property through the CSS.registerProperty method. The problem is that when I load the same component a DOMException is thrown because such a property already exists.

I am looking for a way to know if there is a getter for properties or similar.

Run in a vue3 component.

  1. onMounted( () =&gt; {
  2. try {
  3. window.CSS.registerProperty({
  4. name: &quot;--num&quot;,
  5. syntax: &quot;&lt;integer&gt;&quot;,
  6. inherits: false,
  7. initialValue: 0,
  8. });
  9. } catch (error) {
  10. if(error instanceof DOMException){
  11. console.log(error)
  12. }
  13. }
  14. }

That's the error -&gt; DOMException: Failed to execute &#39;registerProperty&#39; on &#39;CSS&#39;: The name provided has already been registered.

答案1

得分: 1

根据规范:
https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties

Document 对象增加了一个新的 [[registeredPropertySet]] 私有槽,它是描述注册的自定义属性的记录集合。

据我所知,这正是 Chrome 实现的方式。绝对没有意图访问 [[registeredPropertySet]] 的设计机制,所以你已经在使用可能是最佳的可行方法:try / catch。与该集合发生冲突的任何属性名称都会抛出一个语法错误。

英文:

From the spec:
https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties
> the Document object gains a new [[registeredPropertySet]] private slot, which is a set of records that describe registered custom properties.

As far as I can tell, that is exactly how Chrome has implemented it. There is absolutely no intentional mechanism designed to access the [[registeredPropertySet]], so you are already using what might be the best viable approach: try / catch. Any property name colliding with that set will throw a syntax error.

huangapple
  • 本文由 发表于 2023年2月16日 18:42:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/75471101.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定