标签: web-component

聚合物中的材料设计排版和度量规则

我的问题很简单:在Polymer应用程序中实施Material Design(http://www.google.com/design/spec/material-design/introduction.html)的排版和度量规则的推荐方法是什么？例如,如何在CSS中实现sp和dp单元？

我可以包含官方CSS文件吗？我也不确定聚合物的核心和纸元素是否都符合材料设计的一般规则.它说,与Polymer捆绑在一起的Topeka应用程序就是Material Design的一个例子.但是,我还没有通过阅读它的来源,特别是它的样式表来理解这一点.例如,配置文件屏幕(https://github.com/Polymer/topeka-elements/blob/master/topeka-profile.html)不遵循所有度量规则,是吗？(或者我完全弄错了？)

html css web-component polymer material-design

Mar*_*arc

lucky-day

8
推荐指数

1
解决办法

1665
查看次数

如何将对象文字作为聚合物属性传递

为了单独测试我的一些聚合物自定义元素,我希望能够传递js对象文字以获取通常来自父元素的一些属性.我无法弄清楚如何做到这一点.请参阅此示例代码.如果它按照我的意愿工作,它会显示1和2彼此相邻,但它不起作用.

<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="my-element" attributes="stuff">
  <template>
    {{stuff.one}} {{stuff.two}}
  </template>
  <script>
    Polymer('my-element', {
      ready: function () {
        console.log(this.stuff);
      }
    });
  </script>
</polymer-element>
<my-element stuff='{"one": 1, "two": 2}'></my-element>

Run Code Online (Sandbox Code Playgroud)

javascript web-component polymer

cay*_*ood

lucky-day

8
推荐指数

2
解决办法

7732
查看次数

Polymer:我在core-animated-pages元素中没有渲染我的核心列表

当我的自定义元素在core-animated-pages中时,我有一个core-list元素的渲染问题(没有渲染)

这是一个jsfiddle工作时(灰色列表)==> album-grid outside core-animated-pages http://jsfiddle.net/flagadajones/yq30u78d/

这里是一个jsfiddle当id不起作用(没有灰名单)==> album-grid inside core-animated-pages http://jsfiddle.net/flagadajones/m87sd0x3/2//

你能帮我谢谢吗

这是我的代码:

 <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
  </script>

  <link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >

  <style>
   html, body {
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }
      remote-app{ 
      display: block;
      height: 100%;
      margin: 0 auto;
    }

  </style>
  </head>
  <body fit>
    <remote-app ></remote-app>


<polymer-element name="album-detail" attributes="album" layout vertical>
  <template>
    <style>
      #details {
        width: 740px;
        margin: auto;
        height: 100%;
        box-shadow: 0 27px 24px …

Run Code Online (Sandbox Code Playgroud)

css web-component polymer core-elements

fla*_*nes

lucky-day

8
推荐指数

1
解决办法

1009
查看次数

WebComponentsJS与IE10

我试图webcomponentsjs从http://webcomponents.org/使用.不幸的是,关于这个主题和本网站的信息非常混乱,难以确定.网站上的浏览器支持矩阵表示没有IE支持.然而,GitHub上的矩阵表示它支持IE,但四个类别中有两个是"片状"(他们没有提到这意味着什么):https://github.com/webcomponents/webcomponentsjs

bower由于报告的错误(https://github.com/webcomponents/webcomponentsjs/issues/180),该库的版本在任何浏览器中都不起作用.问题已得到解决,但似乎没有进入新版本.所以我只使用了webcomponents.jsmaster分支中的文件,它现在可以在Chrome和Firefox等现代Web浏览器中使用.

不幸的是,它似乎根本不适用于IE10(只是简单地渲染,但没有错误).然后我尝试了示例Web组件(http://webcomponents.org/hello-world-element/),并且在IE中也没有呈现.

看看GitHub页面,它似乎表明这可能至少部分地在IE10中起作用.我的观点是,这个项目的措辞极其模糊和矛盾.

这引出了我的问题: 使用webcomponents.jspolyfill的Web组件是否可以在IE10中运行？具体来说,什么在IE10中不起作用？我知道有些事情会发生,但正如地狱世界的应用程序所表明的那样,并非一切都如此.

javascript web-component

Mik*_*ike

lucky-day

8
推荐指数

1
解决办法

1179
查看次数

如何为聚合物1.0执行on-close或关闭<paper-dialog>的功能？

题:

每当<paper-dialog>元素关闭时如何自动执行函数？

版本:聚合物1.0

码:

<paper-dialog id="paper-id"
              entry-animation="scale-up-animation"
              exit-animation="scale-down-animation">
    <sample-element></sample-element>
</paper-dialog>

Run Code Online (Sandbox Code Playgroud)

dialog web-component polymer paper-elements polymer-1.0

Har*_*anu

2015 07-24

8
推荐指数

1
解决办法

5384
查看次数

如何创建一个像表单元素一样的Web组件？

我正在尝试创建一个特定于表单元素中可用的Web组件,它具有a name和a value.我承认,我可以创建一个Web组件,它extends的HTMLInputElement:

<input is="very-extended">

Run Code Online (Sandbox Code Playgroud)

但我正在努力创造一个全新的元素.

创建常规Web组件时,可以从regular HTMLElement(HTMLElement.prototype)的原型创建它.这让我想到我可以用HTMLInputElement(HTMLInputElement.prototype)的原型创建一个不同的元素.您实际上extending在输入元素的API 时使用该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？

如果你看一下常规输入字段的阴影dom:

你可以看到里面有一个div.我知道这HTMLInputElement有方法和属性,getter/setter等等.那么为什么当我尝试创建我的组件时,它不能成为表单中找到的名称,值对的一部分？

以下是我尝试创建此Web组件的示例:

请注意,他应该在支持Web组件的浏览器中进行测试.

(function() {

  var iconDoc = (document._currentScript || document.currentScript).ownerDocument;
  var objectPrototype = Object.create(HTMLInputElement.prototype);

  Object.defineProperty(objectPrototype, 'name', {
    writable: true
  });

  Object.defineProperty(objectPrototype, 'value', {
    writable: true
  });

  objectPrototype.createdCallback = function() {
    var shadow = this.createShadowRoot();
    var template = iconDoc.querySelector('#test');
    shadow.appendChild(template.content.cloneNode(true));
  };

  document.registerElement('custom-input', {
    prototype: objectPrototype
  });

})();

console.log(
  $('form').serialize()
)

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template …

Run Code Online (Sandbox Code Playgroud)

javascript forms web-component html5-template custom-element

Kev*_*Bot

2016 12-13

8
推荐指数

1
解决办法

2483
查看次数

自定义元素v0和v1之间有什么区别？

标题是自我解释的.如果我得到多个简短答案,我会在最后编译它们.

在使用v1甚至v0之前,请参阅caniuse.com.

html web-component custom-element

Tho*_*ran

2019 04-20

8
推荐指数

1
解决办法

2069
查看次数

嵌套元素(Web组件)无法获取其模板

我使用带有两个自定义元素(v1)的Web组件做了一个简单的例子,其中一个嵌套在另一个元素中.index.html的:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="import" href="app-container.html">
</head>
<body>
  <app-container></app-container>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

APP-container.html:

<link rel="import" href="toolbar.html">
<template id="app-container">
  <app-toolbar></app-toolbar>
</template>
<script>
  customElements.define('app-container', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
      shadowRoot.appendChild(content.cloneNode(true));
    }
  });
</script>

Run Code Online (Sandbox Code Playgroud)

toolbar.html:

<template id="app-toolbar">
  <p>Ok!</p>
</template>
<script>
  customElements.define('app-toolbar', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = this.attachShadow({ mode: 'open' });
      const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; …

Run Code Online (Sandbox Code Playgroud)

javascript web-component shadow-dom html5-template html-imports

jam*_*bay

2017 01-04

8
推荐指数

1
解决办法

1042
查看次数

我可以将函数作为属性传递给Web组件吗？

我正在尝试为input元素创建一个本机Web组件.我希望该组件具有自定义验证功能,类似于聚合物的纸张输入自定义验证器功能.我不确定我是否可以将自定义验证器函数作为属性传递给(web组件)输入元素的实例.任何建议,将不胜感激.

web-component custom-element native-web-component

PS.*_*PS.

2018 08-20

8
推荐指数

2
解决办法

2565
查看次数

ShadyCSS polyfill无法在Edge中正确处理CSS

我正在为第三方网站构建一个小部件，使用影子DOM来防止其CSS干扰我们的CSS。我正在使用ShadyDOM和ShadyCSS polyfills使它在Edge和IE中工作，但是它并没有像我期望的那样为阴影DOM转换CSS。

例：

<!DOCTYPE html>
<html>
	<head>
		<title>Shadow DOM test</title>
	</head>
	<body>
		<div id="container">container is here</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
		<script>
			const shadow = document.getElementById("container").attachShadow({ mode: "open" });
			const style = document.createElement("style");
			style.innerHTML = `
				:host .stuff {
					background: #ff00ff;
				}
			`;
			shadow.appendChild(style);
			const div = document.createElement("div");
			div.classList.add("stuff");
			div.innerHTML = "stuff inside shadow dom";
			shadow.appendChild(div);
		</script>
	</body>
</html>

Run Code Online (Sandbox Code Playgroud)

In Chrome (which supports shadow DOM natively), the stuff div has a pink background, as I would expect. But in …

javascript web-component polyfills shadow-dom shady-dom

Eli*_*ria

2019 10-27

8
推荐指数

1
解决办法

269
查看次数