Web Components 是一种用于构建可复用组件的浏览器标准，它是后续 Web 开发的基础。Polymer 是 Google 大力推广的一个 Web Components 框架，它能够让开发者更快更方便地创建和使用 Web Components。在 Polymer 中使用 Web Components 时，会遇到一些 bug，这篇文章将会介绍这些问题及解决方案。
在 Polymer 2.x 中使用 shadow DOM
shadow DOM 是 Web Components 的一部分，Polymer 2.x 默认启用 shadow DOM。然而在使用 shadow DOM 时，常常会遇到在父组件中使用 CSS 样式，但子组件中并未生效的问题。这是因为 shadow DOM 的作用是隔离组件内外的 CSS 样式，所以父组件中的样式并不会被继承到子组件中。
解决这个问题的方法是使用 CSS 变量。在父组件中声明一个 CSS 变量，在子组件中使用该变量作为样式的输入，这样子组件就可以正常地获取到父组件的样式了。示例代码如下：
-- -------------------- ---- -------
---- --- ---
----------- ----------------------
----------
-------
----- -
----------- ----
-
------ -
------ ----------------
-
--------
---- ------------------- ------------
-----------
--------
----- --------------- ------- --------------- --
----------------------------------------- -----------------
---------
-------------
---- --- ---
----------- ---------------------
----------
-------
------------ -
------ ----------------
-
--------
---- ------------------------- ------------
-----------
--------
----- -------------- ------- --------------- --
---------------------------------------- ----------------
---------
-------------在 Polymer 2.x 中继承元素
Polymer 2.x 引入了一个新的继承机制，使得我们可以更方便地创建可复用的组件。然而在使用该机制时，我们经常会遇到以下两个问题：
- 无法修改父组件中的属性和方法
- 无法在子组件中使用父组件中定义的 CSS 变量
这是因为在 Polymer 2.x 中，自定义元素的定义和实现是相互独立的。子类只能通过声明 is 属性指向父类，这个属性是作为一个字符串传递，因此子组件并不能访问父组件实例的属性和方法。同样，CSS 变量也无法被继承，导致子组件不能使用 CSS 变量。
解决这个问题的方法是使用 mixin。在 Polymer 2.x 中，开发者可以使用 mixin 将父级样式和行为合并到子级中，以解决上述问题。示例代码如下：
-- -------------------- ---- -------
---- --- ---
----------- ----------------------
----------
-------
----- -
----------- ----
-
------ -
------ ----------------
-
--------
---- ------------------- ------------
-----------
--------
----- --------------- ------- --------------- -
------ --- ---- - ------ ------------------- -
---------- -
------------------ ---------
-
-
----------------------------------------- -----------------
---------
-------------
---- --- ---
----------- ---------------------
----------
-------
------------ -
------ ---------------
-
--------
---- ------------------------- ------------
-----------
--------
----- -------------- ------- ----------------------------------------- ---------------- -
------ --- ---- - ------ ------------------ -
-
---------------------------------------- ----------------
---------
-------------在 Polymer 3.x 中使用 Mixin
Polymer 3.x 官方移除了 is 调用方法，引入了一个新的 mixin 规范来解决继承问题。使用 mixin 可以在不同类之间共享代码和属性。
然而在使用 mixin 时，常常会遇到无法混合新属性的问题。这是因为在 mixin 中，只能混合定义的属性，而不能混合运行时添加的属性。解决这个问题的方法是使用 PropertiesMixin。这个 mixin 提供了一个 createProperties 方法，它可以运行时添加属性。示例代码如下：
-- -------------------- ---- -------
---- --- ---
----------- ----------------------
----------
-------
----- -
----------- ----
-
------ -
------ ----------------
-
--------
---- ------------------- ------------
-----------
--------
----- --------------- ------- --------------- -
---------- -
------------------ ---------
-
------ --- ------------ -
------ -
---- ------
--
-
-
----------------------------------------- -----------------
---------
-------------
---- --- ---
----------- ---------------------
----------
-------
------------ -
------ ---------------
-
--------
---- ------------------------- ------------
-----------
--------
----- -------------- ------- ---------------------------------------------- -
------ --- ------------ -
------ --------------
---
---------------------------
-
---- ------
-
--
-
-
---------------------------------------- ----------------
---------
-------------在上述代码中，我们使用 PropertiesMixin 在子组件中运行时添加了一个属性 bar。然后我们继承了 ParentComponent，并为它指定了属性 foo，我们使用 Object.assign() 将 ParentComponent 的属性和子类的属性合并到一个新对象上，以便于在运行时使用。这样就可以让父组件和子组件使用自己的属性了。
总结
Polymer 是使用 Web Components 框架，它可以让我们更方便地创建可复用的组件。然而在使用 Polymer 时，我们常常会遇到一些问题，本文总结了一些常见的问题及解决方案。希望本文能够帮助大家更好地使用 Polymer 和 Web Components，在日常开发中更轻松、高效地创造自己的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475474b968c7c53b025ec0f