标签: web-component

Polymer网站表示使用Polymer中的'extend'属性不支持多重继承(或组合).我希望一个元素由一个Polymer元素中的某些方法组成,而另一些元素来自另一个,以使它反映应用程序逻辑.目前有没有办法在Polymer中实现它？(就像使用javascript mixins那样)

有很多关于如何设置Web组件样式的讨论.

例如,http: //www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/建议您可以使用:host标记来定位组件标记本身,而注入的样式表(例如h1)应该封装组件阴影dom内的h1.

这很棒,适用于chrome.

...但它只适用于铬.

在firefox中访问上面的url并没有显示任何花哨的演示; 事实上,他们完全没有工作.

所以.

https://github.com/polymer/platform理论上是一个polyfill,它允许您使用不具备所需功能的本机支持的浏览器的Web组件.

从理论上讲,这包括对CSS规则的一些有限支持,请参阅:http://www.polymer-project.org/platform/shadow-dom.html

但是,实际上它不起作用.完全没有.

这里发生了什么？当您无法设置组件样式时,我们如何认真地声称platform.js polyfill正在运行并支持旧版浏览器？

我见过的最好的解决方案是要求组件模板具有已知的根类节点:

<template>
  <style>
    .foo .bar {
       ...
    }     
  </style>
  <div class='foo'>
     ...
     <div class='bar'>Hi</div>
  </div>
</template>
<style>  
  .foo .bar { 
    ...
  }
</style> 

请注意,样式表在模板和文档根上下文中都是重复的; 否则firefox,safari和IE样式不起作用.

这真的是我们在Web组件样式方面的水平吗？

我错过了什么吗？

这真的好像这是很多很多进一步被使用比人所提出的建议,即使使用最新的浏览器的每个版本的路程.

这是我用http://codepen.io/shadowmint/pen/iyFxE使用platform.js 0.3.4 的笔,并展示了它如何只在chrome中工作.

我真的很难弄清楚如何调用嵌套的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 --> …

我的项目中有一iron-form件事要做CRUD.除了一个问题之外,这很有效.

如何paper-dropdown-menu从模型数据中显示值？(即:paper-item从我的模型数据中预选对应于[[o.id]]值)

该selected属性paper-menu并没有帮助,因为基于的价值它的指数为基础的,而不是paper-item.

这是表单的代码:

<form is="iron-form" id="itemForm" method="post" action="/api/item/edit">

    <input is="iron-input" name="id" type="hidden" value="{{item.id}}">

    <paper-dropdown-menu label="Title" selected-item="{{selectedTitle}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="o">
                <paper-item value="[[o.id]]">[[o.name]]</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selectedTitle.value]]">

    <paper-input name="firstName" label="First name" value="{{item.firstName}}"></paper-input>

    <paper-button raised onclick="document.getElementById('itemForm').submit()">Save</paper-button>
</form>

所以我基本上paper-slider用自定义元素包装标准元素,并希望包含一些样式.以下是我目前的情况:

<dom-module id="my-slider">
<template>
    <style>
      /* Works */
      paper-slider {
        --paper-slider-active-color: red;
        --paper-slider-knob-color: red;
        --paper-slider-height: 3px;
      }

      /* Doesn't work */
      paper-slider #sliderContainer.paper-slider {
        margin-left: 0;
      }

      /* Also doesn't work */
      .slider-input {
        width: 100px;
      }
    </style>

    <div>
        <paper-slider editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper-slider>
    </div>
</template>

<script>
    Polymer({
        is: "my-slider",
        properties: {
            value: {
                type: Number,
                value: 0,
                reflectToAttribute: true
            },
            min: {
                type: Number,
                value: 0
            },
            max: {
                type: Number,
                value: 100
            },
            editable: Boolean, …

假设我想使用阴影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.

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

我有很多复选框列表要求。我将详细解释。我有一堆语言说：

var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]

我有一个父组件，该组件具有一个表单，其中有四个部分，请说：

class Page extends React.Component {
  render() {
    return (
      <form>
        <h1>CanSpeak</h1> <chkboxlist someProp="speak" />
        <h1>CanSpeak</h1> <chkboxlist someProp="read" />
        <h1>CanSpeak</h1> <chkboxlist someProp="write" />
        <h1>CanSpeak</h1> <chkboxlist someProp="understand" />
        <button
          onClick={e => {
            console.log("Need the various chkboxlist values here");
            e.preventDefault();
          }}
        >
          Save
        </button>
      </form>
    );
  }
}

我希望chkboxlist组件跟踪每个部分中的所选语言列表，并在“保存”按钮单击处理程序中提供它们。我希望在“页面”组件中跟踪状态更改（每个部分下所选语言的列表）。

我不想使用redux或某些此类外部状态管理。

现在创建该chkboxlist组件的方式是什么，以便可以在父Page组件中跟踪状态更改？是否有任何现有组件都可以满足此要求，并在React生态系统中得到广泛使用，而无需重新发明轮子？

我使用角度自定义元素功能（element.js）创建了一个小应用程序，将那个element.js文件导入到index.html中的另一个angular（parent）应用程序中，在开发服务器（ng serve）元素功能正常，但是在生产模式下（ng build --prod）在element.js文件中得到此错误。

@ angular / core“：”〜8.1.3“，@ angular / elements”：“ ^ 8.1.3”

element (angular custom element code)
polyfills.ts

import 'zone.js/dist/zone';  // Included with Angular CLI.
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";

app.module.ts
export class AppModule {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {

    const el = createCustomElement(NotificationElementComponent, {
      injector: this.injector
    });
    // using built in the browser to create your own custome element name
    customElements.define('test-card', el);
  }
}

angular (parent app)
index.html
<!doctype html>
<html lang="en">
<body>
    <app-root></app-root>
    <script src="./assets/elements.js"></script>
</body> …