Html 为什么聚合物项目（网络组件）不是'；与其他方法相比，它还不出名吗？

聚合物版本2已经有一段时间了，但是

• 很少有人谈论它
• 很少有开发人员在他们的博客上写这方面的文章
• 很少有开发人员分享他们的工作流程和经验

聚合物项目由谷歌提供动力，该团队似乎拥有无可挑剔的理念

除了缺少浏览器支持外，Polyfills也能很好地完成这项工作

顺便说一句，尽管Web组件是Web的一个标准，但人们似乎不喜欢打开它并使用它

对我来说，有一个很大的原因，应该有一个解释

---

我认为这与Stackoverflow有关，但我知道很多人不喜欢这种问题。

首先，这实际上是一项非常新的技术，因为Polymer 2于2017年5月正式发布

其次，它得到谷歌支持的事实并不一定是一个优势：想要依赖该公司产品的web开发人员可能更喜欢Angular，它也是由谷歌推广的，更成熟、更著名

第三，它基于Web组件标准这一事实也不是优势：

• PolyFill正在做这项工作（虽然并不总是），但它们的使用增加了一点复杂性，并可能在自定义元素和影子DOM的本机和PolyFill实现之间引入性能差距

• 了解自定义元素和影子DOM的开发人员可能更喜欢创建普通web组件，因为由于。。。谷歌：-）这正是这些新网络标准的目的

第四，为UI元素选择的材料设计风格可能不适合每个人的口味

第五，版本2与版本1不完全兼容，这可能会给新手带来一些困惑，也会让那些投资于短暂版本1的人感到失望

最后，人们可能会质疑Polymer是一个长期框架，还是仅仅是一种支持Google提出的早期标准（自定义元素和影子DOM）的发布并促进其采用的方法

---

PS

以上几点只是假设

---

就我个人而言，我在几个月内开始使用聚合物1，然后改用香草定制元素

正因为如此，除了材料设计、引导或其他设计框架之外，更难实现

bootstrap很容易实现，没有其他事情可以做，比如在每个组件中添加javascript，每个组件都有自己的风格

---

但毕竟polymer是一个很好的项目，对于那些有更好的设计技能和引导能力的人来说，其他人需要更高的设计技能

我在2017年年中用polymer 2做了一个小的演示项目（RC2，不是最终项目），这是一个很好的项目。在我看来，它比Angular（1.6）简单，但我没有太多的经验

专业的

• 我喜欢每个问题都有一个组件的想法
• 易于拆分数据（属性）和模板
• 事件的简单使用

骗局

• CSS规则非常直观

聚合物2示例元素

输入阵列
[[item.label]]



类InputArrayElement扩展了Polymer.Element{
静态get是（）{return'输入数组元素'；}
静态获取属性（）{
返回{
技术：{
类型：数组，
价值：[
{id:“php”，标签：“php”，选中：false}，
{id:“js”，标签：“Javascript”，选中：false}，
{id:“html”，标签：“html”，选中：false}，
{id:“css”，标签：“css”，选中：false}，
],
通知：正确
}
}
}
就绪（）{
super.ready（）；
本附录增加了列表器（“技术变更”，功能（e）{
控制台日志（e）；
});
}
}
define（InputArrayElement.is，InputArrayElement）；

尽管Polymer越来越接近原生的Vanilla web组件，但它们在所有浏览器中都不完全受支持这一事实使得它的使用变得不实际。
我个人喜欢这样的想法，即这种（聚合物）有一天可能会以某种程度上无缝地转移到天然成分而告终。

我在与其他开发者的会谈和对话中也发现，React在美国要大得多，而欧洲的开发者倾向于选择聚合物。确切的原因我不太清楚，但我相信有很多因素会影响它，并且不能精确地指出这些库中的某个库的特定缺点或优点。

正如Supersharp已经提到的，与Angular&React等其他库相比，聚合物仍然是非常新的。但是开发者社区每年都在增长，这一点在上一次哥本哈根聚合物峰会上得到了特别强调，当时的一切都与“平台”有关。事实证明，这是社区、网络标准和它周围的一切，而不是我感到非常愉快的一种完全的聚合物崇拜。

最后要添加的内容。

---

虽然，Polymer可能会得到谷歌的支持，但其研发团队规模相对较小Youtube刚刚改用了100%聚合物，我发现实现这一点的团队比开发平台的实际团队要大得多。（我们这里谈论的是少数人）。

我有着几乎相同的感觉或假设。此外，4）材料设计并非仅限于聚合物。我也在考虑离开Polym

<dom-module id="input-array-element">
    <template>
        <h3>Inputs Array</h3>
        <template is="dom-repeat" items="{{technology}}">
            <input type="text" value="{{item.label::input}}">[[item.label]]<br/>
        </template><br>
    </template>
    <script>
    class InputArrayElement extends Polymer.Element {
        static get is() { return 'input-array-element'; }

        static get properties() {
            return {
                technology : {
                    type: Array,
                    value: [
                        {id:"php", label:"PHP", selected:false},
                        {id:"js", label:"Javascript", selected:false},
                        {id:"html", label:"HTML", selected:false},
                        {id:"css", label:"CSS", selected:false},
                    ],
                    notify: true
                }
            }
        }

        ready() {
            super.ready();
            this.addEventListener("technology-changed", function(e){
               console.log(e); 
            });
        }

    }

    window.customElements.define(InputArrayElement.is, InputArrayElement);        
    </script>
</dom-module>