问题标签 [web-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
4321 浏览

javascript - 聚合物 - 迭代模板中的对象

根据聚合物文档repeat,可以使用以下语句迭代对象或数组<template>

“表达式”可以是简单的标识符、路径或完整的表达式(包括对象和数组字面量)。

然而,经过测试,似乎重复语句只适用于数组,而不适用于对象:

http://jsbin.com/oqotUdE/4/edit

我做错了什么吗?

0 投票
1 回答
298 浏览

javascript - 从 JS 实例化 Web 组件

我正在尝试直接从 Javascript 实例化 Web 组件,但系统找不到公共构造函数。我将举一个简单的例子来展示上下文和结果:

HTML 模板:

HTML索引:

控制台结果:

(1) 我检查了 window 对象,它包含构造函数 Foo: function (){return f(a)} (2) 我不知道是什么但 window.Foo 返回 undefined (3) ...所以, new Foo() 失败:未捕获的 ReferenceError:未定义 Foo

有人可以帮助我了解问题所在吗?谢谢。

0 投票
6 回答
20348 浏览

html - HTML5 模板在 Internet Explorer 上不起作用,如何解决?

我在 HTML5 中制作了一个模板,该模板适用于 Chrome 和 Firefox,但不适用于 Internet Explorer(在 IE 8 上测试)。

我怎么解决这个问题?

0 投票
1 回答
329 浏览

html - 使用 polymer.dart 构建可移植的 Web 组件

我想使用 polymer.dart 构建一组可移植的 Web 组件,这些组件可以嵌入到任何随机的 html 页面(包括任何 dart 项目之外的页面)中。这个想法是客户可以在他的 html 页面上嵌入我的 polymer.dart 元素,而无需客户创建 dart 应用程序。我认为这将是一件显而易见且直接的事情 - 但是在阅读了许多教程和指导页面,并阅读了大量 dart/polymer.dart 文档之后,我还没有找到任何关于如何去做的解释。据推测,dart/polymer 代码必须编译为 javascript 才能包含在客户的 html 页面中。有人可以评论这是否可能,如果可以,请提供解释并举例说明如何去做?这种飞镖/聚合物。

0 投票
1 回答
775 浏览

angularjs - WebComponents 应用架构

我正在尝试了解 WebComponents 和潜在的企业应用程序架构选项。我浏览了有关polymersiJS 和Mozilla 的brick 和WinJS 的视频和文章。我主要从打包应用程序的角度来看待这些,而不仅仅是网站创建。

我试图在不被细节吸引的情况下获得 5000 英尺的视野。感觉 webcomponents 是使用 web 技术重做的 winforms/vbx/ocx/.net 控件。我是否正确地考虑了这一点?

从历史的角度来看,我认为潜在的更高级别的应用程序框架和架构可能是

  1. 事件驱动 - (旧的 windows 窗体模型,polymerjs 示例似乎正在使用事件驱动模型)
  2. MV*(C) - (猜测 AngularJS 2.0 提出的世界观 - 使用来自 Web 组件基础设施的管道并创建更高级别的 MVC 框架)
  3. MV*(VM) - WinJS 似乎正在走向那里,他们现在正在创建他们的专有控件,我希望他们会随着它们的成熟而转向 webcomponents

我并不是想说这些是唯一的框架。我用它们作为例子来思考心智模型的影响和未来方向。

请通过纠正我的理解或其他我没有想到的事情来帮助我。

谢谢,尼兰詹

0 投票
1 回答
13804 浏览

polymer - 自定义元素的名称中是否需要破折号?

是否可以在不使用破折号的情况下命名您自己的自定义元素<date>,<person>或其他元素?<city>可以在没有它们的情况下使用定义元素吗?

0 投票
1 回答
158 浏览

ember.js - 如何在 Emberjs 中组织复杂组件的状态?

如果我错了,请纠正我。ember 中组件的功能看起来很简单。

在许多框架中,“组件”可能类似于一个小型应用程序,它管理自己的状态并提供一小组 API。由于 ember 用于Route管理 webapp 的状态,ember 组件是否有自己的“路线”来组织其状态,还是我必须实现自己的解决方案,例如状态机?

0 投票
2 回答
1079 浏览

javascript - How to create a custom input type using Web Components?

HTML5 introduce new kinds of input like: number, color, datetime. AngularJS is bundled with polyfills for some of them.

I am looking for some usable method to create custom type of input, using Web Components or another standardized part of HTML. There is already anwser for AngularJS, but I do not want use any external libruary.

UPD:

Examples of custom types taken from HTML5.

  • Types with custom validation like email and tel.
  • Types with different view like date and datetime.
  • Types with custom semantic and/or style like search.
0 投票
2 回答
62 浏览

javascript - 使用聚合物的奇怪的 javascript 属性定义

在下面的代码xFoo中将是一个对象(或其原型)具有bar值为 5 的实际属性,并且它将具有实际方法foo()。这是什么类型的对象符号?这不是我在 ECMAScript 5 中定义属性的方式。我原以为这xFoo.bar是一个具有 function的对象,get()并且xFoo.foo是一个具有 method 的对象value()。我在这里想念什么?

0 投票
2 回答
1163 浏览

javascript - 聚合物自定义元素:通过导入重用 css

问题:

我似乎无法制作<i>标签来呈现 Bootstrap 图标,它无法识别 Bootstrap 提供的类:

诊断要素

标记.html

我也尝试将导入移到外面<polymer-element>,但它也不起作用。

bootstrap.html包含这个:

如果我加载一个简单的旧链接而不是导入,bootstrap.css那么它可以工作,但是,如果我也在bootstrap.css索引中使用,该站点将加载两次bootstrap.css

这是 Web 组件的限制吗?这是聚合物的问题吗?

谢谢!

弗兰