标签: web-component

我想从自定义元素的内容中提取第一段(作为摘要).我希望以下工作:

<polymer-element name="x-thing" noscript>
  <template>
    <segment class="summary">
      <content select="p:first-child"></content>
    </segment>
    <segment>
      <content></content>
    </segment>
  </template>
</polymer-element>

不幸的是,<content select="p:first-child">似乎没有任何匹配:(

这是一个相应的codepen.

在使用Web Components的项目之后,我将回到AngularJS.令我感到沮丧的是,我找不到适当的方法来保持CSS内部(或封装)的指令.

使用Web组件我没有这个问题,因为已经有一个样式标记可以嵌入到模板中.

AngularJS指令的情况并非如此.

直到这里我看到的是:

1)在外部文件中定义CSS规则:my-directive {color:red;},但这不是封装.

2)使用element.css({})定义内部规则; 内部链接功能,但在这种情况下,样式是内联应用的,因此太重,不能轻易地被外部CSS覆盖.

还有其他方法吗？

谢谢

我想用Polymer Paper-Slider创建一个系列.用户可以移动Min和Max Pin的范围,它有两个输出,而不仅仅是一个.例如,我可以用来过滤电子商务网站上的选择的最低和最高价格.

希望有人能提供帮助.

谢谢

我正在使用Polymer创建一个项目,并具有以下代码:

<paper-radio-group>
    <template repeat="{{answer in answers}}">
        <p>
            <paper-radio-button name="{{answer.choice}}" label="{{answer.choice}}"></paper-radio-button>
        </p>
    </template>
</paper-radio-group>

我有一个答案列表,我想在paper-radio-group中使用.显示此工作正常.答案数组中的每个项目都显示为纸质单选按钮.

问题是它们没有相互连接.因此,当选择一个纸质单选按钮时,不会取消选择另一个.这可能是因为paper-radio-group标签位于模板标签之外.但是把它放在里面就会像纸张单选按钮那样重复,而且也不会起作用.

有没有办法让这个工作？还是不可能？

任何人都可以告诉我Mozilla是否已经改变了不实施HTML导入的立场(HTML5 Web Components规范的一部分)？

我真的很难弄清楚如何调用嵌套的Polymer Web组件的函数.

这是标记:

<rise-playlist>
  <rise-playlist-item duration="5">
     <rise-distribution distribution='[{"id":"VGZUDDWYAZHY"}]'></rise-distribution>
  </rise-playlist-item>
</rise-playlist>

该rise-distribution组件有一个canPlay我想从里面调用的函数rise-playlist.

看起来像这样的dom-module定义rise-playlist:

<dom-module id="rise-playlist">
  <template>
    <content id="items" select="rise-playlist-item"></content>
  </template>
</dom-module>

我可以成功访问这样的rise-distribution元素:

var distribution = Polymer.dom(this.$.items[0]).querySelector("rise-distribution");

但是,当我试着打电话时distribution.canPlay(),它说这distribution.canPlay不是一个功能.

我已经定义了dom-module的rise-playlist-item是这样的:

<dom-module id="rise-playlist-item">
  <content id="dist" select="rise-distribution"></content>
</dom-module>

不确定我是否需要那个<content>标签,虽然它们都不起作用.

有任何想法吗？

谢谢.

我正在尝试在Polymer Starter Kit中添加粘性页脚.到目前为止我已经尝试过了

core-header-panel和sticky footer 以及 http://www.jlmiller.guru/jekyll/2015/06/02/sticky-footer.html

但似乎都不起作用.

如何在纸质标题面板上添加/设置粘性页脚？

<paper-header-panel class="flex">
  <paper-toolbar>
    <div>Paper-Toolbar</div>
  </paper-toolbar>
  <div class="content fix fullbleed layout vertical">
    <iron-pages attr-for-selected="data-route" id="pages" selected="home">
      <section data-route="home" class="layout vertical center">
        <paper-material>This is some content for home
          <br />
          <br />
          <br />
          <br />
        </paper-material>
        <paper-material>This is some other content for home</paper-material>
        <paper-button id="btn1" raised>Next Iron Page</paper-button>
      </section>
      <section data-route="page1" class="layout vertical center">
        <paper-material>This is content for Page 1</paper-material>
        <paper-button raised>Button to move to Home</paper-button>
      </section>
    </iron-pages>
  </div>
  <!-- content --> …

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

我认为shadow DOM让我们实现了样式封装,并隐藏了组件的HTML实现.

但是当我在chrome中检查shadow root时,我可以看到组件的HTML.

那究竟是什么帮助我们实现的呢？它只是风格封装吗？

我正在开始一个新项目,我们的任务是创建一个通用标题.这意味着在我们拥有的不同域/服务器,客户创建的站点和第三方站点上,我们需要一种非常简单的方法将此代码提供给人们.

此通用标题还将包含一些搜索功能,这与我的问题略有关系.简而言之,它将包含JavaScript以更改action其<form>元素的属性,具体取决于下拉选择,以及提交表单.

我们想报头工作,方式是,它生活在一个位置,我们正在考虑某种形式的HTTP请求,以获得头.在我们看来,这将最大化Universal Header的可移植性.

标题需要与WordPress(不是问题)很好地集成,而且在AngularJS中,在我们的讨论中,不太确定是否可行.因此,搜索功能的"略微相关"部分.

我们谈到的其中一个解决方案是在HTML中这样做,就像这个答案一样,但我总是对通过HTTP请求原始HTML并将其转储到页面中更加怯懦,但也许这是正确的方法,但也许不是吗？由于我们不确定,我们考虑了JIRA Issue Collector,它们基本上将JavaScript流式传输给他们的客户,然后构建问题跟踪器按钮,固定在页面的一侧,其中包含一些HTML,CSS和JS.然后,用户可以单击此按钮,打开准备提交的表单.这可能是一个过度简化,但基本上,他们的JS片段包HTML/CSS/JS并将数据提交到他们的服务器.

这是我们喜欢的方向:单个文件包含我们需要的所有内容.但是,我想知道一些事情:

• 有哪些模式可以处理标题的"闪存"？由于在页面加载时它是AJAXed,标题将丢失然后突然出现,你怎么能处理这个可用性问题？我想的是一个标题区域的Skeleton区域,然后让JavaScript替换它,但我不知道这是否是陈词滥调.
• 什么是将HTML,CSS和一些JavaScript功能的创建捆绑在一个文件(如JS文件)中的标准方法,或者更好地将HTML文件链接到JS和样式表？我只是不确定捆绑件.我们不会在这个项目中使用Angular或React,但我对Webpack有一些熟悉,看起来它可以完成这项工作.即使这个项目不使用Angular或React,它仍然需要与其他框架集成.
• 我正在考虑的一件事可能是将HTML分解为单独的HTTP请求,并将JavaScript和样式捆绑在另一个HTTP请求中 - 几乎就像一个Web组件.换句话说,我们可以并行请求HTML和CSS/JS,当它返回时,只需在UI中将它粉碎在一起.这样做会有什么危险,或者在做这样的事情时要考虑一些事情？
• 将此与AngularJS集成的好方法是什么？由于此标题中将包含搜索功能,因此当有人提交搜索时,我们需要某种方式广播(到AngularJS),以及他们提交的搜索内容.

最初,对于上面的最后一点,我想把它附加到一个window物体上.然后在JavaScript中创建自定义事件处理程序 - 但是你如何做到这一点？也许下面的伪代码是偏离基础的,但这就是我问这个问题的原因:

/// inside the SearchController in AngularJS
$scope.defaultRealm = 'products';

/// to select default realm
document.when('angularJSLoads', function () {
    document.getElementById('universial-header').find('.dropdown', function () {
        // put actions to select $scope.defaultRealm in the dropdown options.
    })
})

/// to search in own defaultRealm
document.querySelector('.dropdown').onEvent('headerSearch', function (e) { …