可能很简单的问题,我还没有找到答案:
ShadowDOM或WebComponents(作为更大的标准)是否实际上封装了JavaScript？就像每个组件都有单独的命名空间一样？
从我遇到的聚合物到现在还没有,这是显而易见的,因为聚合物通过JS进行聚合填充.
谢谢!
我最近开始使用Ember.js,我已经了解了Web组件.我之前使用过jQuery UI小部件,它们看起来是一样的.Web组件和窗口小部件之间是否存在差异,或者它们或多或少相同？
题:
在Web组件规范中,当您想要Light-DOM从模板中读取元素时,<content select></content>可以使用该元素.但是,如何从组件的javascript代码中检索此信息？
例:
<wc-timer>
<wc-timer-title>I want to read this from JS</wc-timer-title>
</wc-timer>
谢谢你,哈维尔.
来自文件:
实例化组件时,Angular
Run Code Online (Sandbox Code Playgroud)creates a shadow DOM for the component. loads the selected template into the shadow DOM. creates a child Injector which is configured with the appInjector for the Component.
但是,据我所知,IE,Safari甚至Firefox的默认配置都不支持shadow DOM !
考虑到shadow DOM不是可以通过js库或其他东西轻松添加到浏览器的功能,如何对angular2进行浏览器支持？
PS:原谅我打电话给IE和Safari(特别是IE)流行的浏览器!
Polymer 1.0问题:
当纸张输入设置为"禁用"时,文本和下划线将变为非常浅灰色,难以阅读.如何使用css设置文本颜色.这是我到目前为止所尝试的:
--paper-input-container-input-disabled {
color:black;
}
<paper-input label="Email" disabled></paper-input>
但它不会改变文字颜色.虽然我可以使用相同的mixin改变背景颜色.
在Polymer文档(https://elements.polymer-project.org/elements/iron-input)中,我发现:
<input is="iron-input" bind-value="{{myValue}}">
在另一份官方文件(https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#type-extension)中,我发现:
<dom-module id="main-document-element">
<template>
<p>
Hi! I'm a Polymer element that was defined in the
main document!
</p>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'main-document-element'
});
});
</script>
</dom-module>
<main-document-element></main-document-element>
我只是想知道为什么第一个<input is="iron-input" bind-value="{{myValue}}">不能写成<iron-input bind-value="{{myValue}}">.
它是否兼容,这使得更容易填充？
如果在阵列中找不到过滤器,有人可以帮助如何显示此模板.
<template is="dom-if" if="{{itemsEmpty}}">
The array is empty!
</template>
这是我的整个代码.但由于某些原因,dom-if模板中的if条件不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='bower_components/webcomponentsjs/webcomponents-lite.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">
<!--<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">-->
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<style>
.taller{
height:120px;
}
[vertical-align="top"] ul {
margin-top: 0;
}
[vertical-align="bottom"] ul {
margin-bottom: 0;
}
button, paper-button {
border: 1px solid #ccc;
background-color: #eee;
/*padding: 1em;*/
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue; …我希望本地开发一些web组件,即使互操作性不是很好.所以我在我的ubuntu操作系统上的chrome:// flags标签下启用了google-chrome-stable版本50.0.2661.102的实验性网络平台功能...但我仍然只有不推荐使用(根据developer.mozilla文档的链接)方法:
document.registerElement( {...})
在Firefox中也一样.我知道如果我安装了聚合物,那么polyfill会修复它,但据我所知,聚合物api与W3C标准不是100%相同.有没有人设法使用最新标准在浏览器中本地试用Web组件？特别是这部分标准我想试试:
2.1.1 Creating an autonomous custom element
This section is non-normative.
For the purposes of illustrating how to create an autonomous custom element, let's define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so:
<flag-icon country="nl"></flag-icon>
To do this, we first declare a class for the custom element, extending HTMLElement:
class FlagIcon extends HTMLElement {
constructor() {
super();
this._countryCode …javascript google-chrome cross-browser web-component custom-element
我有一个元素的引用，该元素有时会升级为自定义元素。我如何等待它升级？
例如，假设el是参考。如果假设为此目的附加了承诺，则代码可能类似于
await el.upgradePromise
// do something after it has been upgraded.
那当然不存在，但是描述了我想做什么。也许没有轮询就没有办法吗？如果使用轮询，我将轮询什么（假设我没有对应该升级到的类构造函数的引用）。也许我可以轮询el.constructor并等待其不属于HTMLElement，或等待它不被HTMLUnknownElement？
编辑：对于背景，我有一些类似以下的代码，其中使用setTimeout是为了使代码正常工作的技巧。第一个console.log输出false，而超时中的一个输出true。
import OtherElement from './OtherElement'
class SomeElement extends HTMLElement {
attachedCallback() {
console.log(this.children[0] instanceof OtherElement) // false
setTimeout(() => {
console.log(this.children[0] instanceof OtherElement) // true
}, 0)
}
}
在哪里OtherElement引用将在某个时候注册的Custom Element类。请注意，我使用的是Chrome v0 document.registerElement。需要超时，因为如果SomeElement首先按以下代码OtherElement注册，则将尚未注册，因此，因此如果SomeElement元素的子级是的实例OtherElement，那么在升级这些元素之前不会如此下一个。
document.registerElement('some-el', SomeElement)
document.registerElement('other-el', OtherElement)
理想情况下，这样的超时是不希望的，因为如果升级花费了更长的时间（由于某些未知原因，可能取决于浏览器的实现），那么超时破解也将失败。
我想要一种绝对的方式来等待升级，而不会出现故障，并且如果可能的话也不会进行轮询。也许过一段时间也需要取消吗？
编辑：理想的解决方案将使我们能够等待任何第三方自定义元素的升级，而无需在运行前修改这些元素，也不必在运行时进行猴子补丁。
编辑：从观察Chrome的v0行为来看，似乎第一个调用document.registerElement('some-el', SomeElement)导致那些元素升级，并且在注册之前attachedCallback …
如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：
var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);
当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。
问题：
web-component ×10
polymer ×6
javascript ×5
html5 ×2
shadow-dom ×2
angular ×1
css ×1
dom ×1
ember.js ×1
html ×1
html-imports ×1
polymer-1.0 ×1
widget ×1