标签: web-component

在http://www.polymer-project.org/docs/polymer/polymer.html上查看 Chrome的DevTools,我注意到一些有趣,好奇和无法解释的事情:

1. 浏览器缓存实际的Polymer组件,因此后续<link rel="import"对组件的调用不需要服务器往返.

2. 浏览器将这些组件缓存为数据URL

显然,这样做可以非常快速地加载缓存的组件(0毫秒延迟)

我的问题

1. 如何控制组件的缓存,以便在需要时可以使缓存无效？(查看http://www.w3.org/TR/2014/WD-html-imports-20140311/上的规范,我没有看到缓存)

2. 是否值得将我的整个网站结构分解为Web组件(又名"小部件"),以便我网站的各个部分加载速度快？示例,我不是总是使用相同的nav来提供相同的布局,而是使用<my-nav>组件部署它,导航的数据(它有意义的地方)都包含在组件本身中,因此不需要与组件本身进行交互.服务器一旦缓存.

我一直在阅读网络组件,并且对新生规范非常感兴趣.有没有人知道在DOM中是否支持双向数据绑定,而不必使用Polymer？一个例子将不胜感激.

我很难用Polymer 0.5实现简单的下拉列表.

我也从Polymer .5并行迁移到1.0.但这是单独的讨论( 迁移聚合物项目.5到1.0错误).

这是我用来在body体内定义聚合物元素的代码:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink="">
<template>
    <shadow></shadow>
    <content></content>
</template>
</polymer-element>

我在这个身体的下方使用了这个元素:

<x-trigger icon="menu" relative="" noink="" role="button" tabindex="0" aria-label="menu">
    <paper-dropdown tabindex="-1" class="core-transition" style="outline: none; display: none;">
        halign = left
        <br>
        valign = top
    </paper-dropdown>
</x-trigger>

我在页面的head部分定义了以下脚本部分:

<script>
    Polymer('x-trigger', {
        toggle: function () {
            if (!this.dropdown) {
                this.dropdown = this.querySelector('paper-dropdown');
            }
            this.dropdown && this.dropdown.toggle();
        }
    });
</script>

问题是,我确实看到了页面中的图标按钮,但是当我点击该按钮时,没有任何反应.

进一步调试透露,

1. 如果我在chrome中打开控制台调试器
2. 在Polymer部分中的Polymer或内部切换方法上放置断点
3. 页面刷新
4. 断点被击中和下拉有效

我不知道造成这个问题的原因

更新:调试时我在行中收到以下错误: Polymer('x-trigger', {

/ deep/combinator已弃用

这是否意味着我必须升级到聚合物v1来解决这个问题,还是他们对聚合物0.5的任何解决方法？

我正在使用本机实现创建一个Web组件,在它的html模板中有指向图像的链接.但是,这些链接仅在绝对或相对于主文档时才起作用,这意味着该组件不可重用或可移植.而且,这非常违反直觉.

目前,我将data-url_prefix属性添加到需要使用图像的所有元素.然后,在为自定义元素创建阴影根时,我将{{URL_PREFIX}}替换为该参数的值.

我的解决方案似乎很糟糕.如果你建议更好的东西,我会很高兴,谢谢.

我在http://webcomponents.org/polyfills/html-imports/页面上找到了一个有趣的引用:

POLYFILL笔记

在导入的文档中,HTML中的href和src属性以及CSS文件中的url属性是相对于导入文档的位置而不是主文档的位置.

为什么polifill会使用与本机实现不同的逻辑？

Web组件理想情况下应该封装它们的所有依赖项,但是如果Web组件需要图像,它应该知道该图像的绝对URL,这不允许在文件结构中简单地移动组件.

比方说,例如我有以下结构:

• 的index.html
• CSS
  • 的main.css
• JS
  • main.js
• web_components
  • cool_web_component
    • cool_web_component.html
    • 的icon.png

如果我将其更改为以下内容:

• 的index.html
• CSS
  • 的main.css
• JS
  • main.js
• cool_web_component
  • cool_web_component.html
  • 的icon.png

我将被要求在这些文件中的某处更改指向icon.png的指针我的问题是如何避免它,或以优雅的方式解决它.另外,为什么实际的原生实现与polyfill冲突？

使用JavaScript动态地将样式(即在运行时创建样式的值)应用于HTML元素的好方法是什么？

我正在寻找一种方法来将JavaScript小部件(JS,CSS和标记)打包在一个组件中(基本上是一个对象).我们的想法是让组件封装样式(因此用户可以使用一个很好的API来修改它,而不是直接修改CSS并间接应用更改的更紧密耦合的方法).问题是单个API调用可能意味着对几个样式元素的更改.

我这样做的方法是构造CSS并将styleatrribute设置为适当的元素(最有可能使用ID来避免将更改应用于标记的其他区域).这是一个好的解决方案吗？有没有更好的方法呢？

Dears,关于Web组件交互的黄金规则是:

• 家长引用直接孩子
• 儿童不参考父母
• 父 - >子:通过方法调用
• 孩子 - >父母:通过事件

这个模式在很多项目中都适用于我们(YUI,JQuery,......)Angular2怎么样？

我们应该使用:

• Parent调用ViewChild
• 家长侦听子事件

或输入/输出？

首选看起来很漂亮.@ angular2 @expert,您怎么看？

对所有人来说,加布里埃尔

我的应用程序逻辑类似于谷歌的应用程序切换器,让我称之为Wrapper.此应用程序在所有Google服务中进行,并且在任何地方都具有一致的UI.

我正在寻找解决方案,以我们的Wrapper应用程序注入几个完成不同的应用程序与自己的样式,视图和JS.它们使用不同的技术编写,如React和Angular.

我该如何实现这样的架构？Web组件是否是解决方案,如果是 - 请提供一些示例.(目的是单独部署包装器和所有内容应用程序,因此它们将具有来自包装器的一致UI和逻辑).

请不要提iframe!

运行polymer build元素目前存在一个漏洞:https://github.com/Polymer/polymer-cli/issues/338

有没有人有一些Grunt脚本(或描述它究竟是什么)来完成相同的操作？

如何在聚合物中使用私有非静态变量？

在:

<polymer-element name="component-one">
   <script>

       Polymer('component-one', {
       internalState = 1,    
       ready() {
               this.anotherInternalState = 1;
           }
           /* more variables and functions */
      });

   </script>

</polymer-element>

internalState和anotherInernalState都暴露给外部(例如通过以下方式访问:

document.querySelector('component-one').internalState

(从外部更改internalState时可能不合需要使组件不稳定.)

如:

<polymer-element name="component-two">
   <script>

    (function() { 

       var internalState = 1;


       Polymer('component-two', {
          /* some variables and functions */
      });
    })();

   </script>

</polymer-element>

internalState在外部是隐藏的,但它是静态的,并在组件的所有实例之间共享.

有没有办法在聚合物对象中有一个私有的非静态变量？

有没有办法为组件的@绑定指定默认值.

我已经看到了如何使用指令执行此操作的说明:如何在Angular Directive Scope中设置默认值？

但组件不支持编译功能.

所以,我有这样的组件:

{
  name: 'myPad',
  bindings   : {layout: '@'}
}

我希望释放组件的用户必须指定'layout'属性的值.所以这:

<my-pad>...</my-pad>

而不是这个:

<my-pad layout="column">...</my-pad>

而且......这个'layout'属性应该被使用的角度材质JS所消耗,所以它需要在渲染DOM之前被绑定(所以材质JS可以拾取它并添加相应的类到元素).

更新,一些截图来澄清情况:

组件定义:

{
  name : 'workspacePad',
  config : {
    templateUrl: 'src/workspace/components/pad/template.html',
    controller : controller,
    bindings   : {
      actions: '<', actionTriggered: '&', workspaces: '<', title: '@',
      flex: '@', layout: '@'
    },
    transclude: {
      'workspaceContent': '?workspaceContent'
    }
  }
}

组件用法:

<workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
  action-triggered="$ctrl.performAction(action)">
  <workspace-content>
    <div flex style="padding-left: 20px; padding-right: 20px; ">
      <p>test test</p>
    </div>
  </workspace-content>
</workspace-pad>

我想在第二个屏幕截图(用法)选项中制作"flex"和"layout". …