Polymer 是一个基于 Web Components 的前端框架，它提供了一种方便快捷的方式来创建可重用的自定义元素。Polymer 3.x 是一个新版本，它提供了许多新的功能和改进。但是，在使用自定义元素属性时，你可能会遇到一些问题。本文将深入探讨这些问题，并提供一些解决方案。
什么是自定义元素属性？
自定义元素属性是指在 Polymer 中定义的自定义属性。这些属性可以用来控制元素的行为和样式。例如，你可以创建一个自定义元素属性来控制元素的背景颜色或文本颜色。在 Polymer 中，你可以使用 @property 装饰器来定义一个自定义元素属性。
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
----------------- ---------------------------
------ ---------------------
-
--------
-------------
--
-
------ --- ------------ -
------ -
---------------- -
----- -------
------ --------
------------------- ----
--
---------- -
----- -------
------ --------
------------------- ----
-
--
-
-
----------------------------------- -----------以上代码创建了一个名为 my-element 的自定义元素，并定义了两个自定义元素属性：backgroundColor 和 textColor。这些属性在 properties 方法中被定义，然后在模板中使用。
问题描述
在 Polymer 3.x 中，自定义元素属性似乎不起作用。当你尝试在自定义元素中使用 this.backgroundColor 或 this.textColor 时，你会发现这些属性的值始终为 undefined。
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
----------------- ---------------------------
------ ---------------------
-
--------
-------------
--
-
------ --- ------------ -
------ -
---------------- -
----- -------
------ --------
------------------- ----
--
---------- -
----- -------
------ --------
------------------- ----
-
--
-
------------- -
--------
---------------------------------- -- ---------
---------------------------- -- ---------
-
-
----------------------------------- -----------问题原因
问题的原因是 Polymer 3.x 中自定义元素属性的初始化和赋值顺序发生了变化。在旧版本的 Polymer 中，自定义元素属性的初始化是在构造函数中完成的。但是，在 Polymer 3.x 中，自定义元素属性的初始化是在 connectedCallback 方法中完成的。这意味着在构造函数中访问自定义元素属性时，它们还没有被初始化。
解决方案
为了解决这个问题，你需要将代码从构造函数中移动到 connectedCallback 方法中。这样可以确保自定义元素属性已经被初始化并可以被访问。
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
----------------- ---------------------------
------ ---------------------
-
--------
-------------
--
-
------ --- ------------ -
------ -
---------------- -
----- -------
------ --------
------------------- ----
--
---------- -
----- -------
------ --------
------------------- ----
-
--
-
------------------- -
--------------------------
---------------------------------- -- -------
---------------------------- -- -------
-
-
----------------------------------- -----------结论
Polymer 3.x 中的自定义元素属性似乎不可用的问题是由于属性的初始化和赋值顺序发生了变化所致。为了解决这个问题，你需要将代码从构造函数中移动到 connectedCallback 方法中。这样可以确保自定义元素属性已经被初始化并可以被访问。在开发过程中，你应该时刻注意自定义元素属性的初始化和赋值顺序，并遵循最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a0fc55c5a933a34105fd2
