如何在Firefox 31/32中启用自定义元素？根据Are We Componentized吗？有"正在进行支持",但我看不到它,谷歌搜索没有帮助.
我有一个测试数组,我从iron-ajax中检索大约1000个项目.我将返回数组设置为我的自定义聚合物元素的people属性.铁列表显示前20个结果,但是当我向下滚动时,其余的结果都没有被加载.
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<dom-module id="people-list">
<template>
<iron-list items="[[people]]" as="item" class="flex">
<template>
<div style="background-color:white; min-height:50px;">[[item.city]]</div>
</template>
</iron-list>
<iron-ajax
auto
id="ajaxPeopleList"
method="POST"
url="/people/list"
handle-as="json"
last-response="{{people}}">
</iron-ajax>
</template>
<script>
Polymer({
is: 'people-list',
properties: {
people: {
type: Array
}
}
});
</script>
</dom-module>
我认为它可能与屏幕/铁列表元素的高度有关,但我卡住了,不知道如何继续.
如果我设置铁列表元素的高度(以像素为单位),我可以加载所有项目.但我只是想让它适合屏幕.文档看起来你可以使用iron-flex布局并使用类flex,这是我在我的示例代码中尝试做的,但它没有任何效果.
令我惊讶的是,如果我使用自定义标签名称,现代浏览器似乎不会抱怨,然后将这些标签设置为正常html标签的样式,它们的行为类似于span元素,并且像div元素一样,如果我设置的话display: block;.
我的意思是,即使我不使用聚合物,或尝试注册自定义元素.
例如,我有这个:https: //jsfiddle.net/hvybz0nq/4/
<flex-fixed>
<sections>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<div>Add Section</div>
</sections>
<splitter></splitter>
<pages>
<page>Page 1</page>
<page>Page 2</page>
<page>Page 3</page>
<div>Add Page </div>
</pages>
</flex-fixed>
有些css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
flex-fixed, sections, section, div, pages, page {
display: flex;
}
body {
height: 100vh;
}
flex-fixed {
width: 100%;
height: 100%;
flex-direction: column;
position: fixed;
}
section {
border-right: 1px solid lightgrey;
}
splitter {
height: 1px; …这是一个基本的 hello world Web 组件。当属性“who”更改时，不会触发 attributeChangedCallback。检查小提琴
MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
console.log('attributeChangedCallback triggered');
if (attr === 'who') {
this.setWho(newVal);
}
};
我正在使用Polymer App Toolbox中的app-drawer-layout,而不是使用固定的标题<div main-title>My App</div>,我想让它与iron-pages-navigation 一起动态工作.
理想情况下,我想在加载的每个元素中指定标题iron-pages,但在导航中定义它也是一种解决方案.但是,我有点卡住,因为我所做的尝试似乎都没有效果.
我的代码看起来像这样:
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<moso-profile name="profile"></moso-profile>
<moso-resume name="resume"></moso-resume>
<moso-portfolio name="portfolio"></moso-portfolio>
<moso-contact name="contact"></moso-contact>
</iron-pages>
现在,我尝试使用<content select=".page-title"></content>(Polymer Docs),然后<div class="page-title">New title</div>在每个加载的元素中都有一个.没工作.
我也尝试title在每个元素中添加一个属性iron-pages(如此:) <moso-profile title="Profile" name="profile"></moso-profile>,然后尝试用一个/两个方式绑定它[[page.title]],也没有运气.
难道我做错了什么？还是不可能了？
我正在开发一个应用程序,我将其他html网页加载到当前页面.其他网页是独立的应用程序.我正在尝试在shadow DOM中加载网页.为此,我使用了以下代码,它将尝试在shadowRoot中导入test-template.html.这里我没有使用模板标签,因为我要动态渲染模板(使用ajax).
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="loadTemplate()" value="Load template">
<div id="template-holder"></div>
<script>
function loadTemplate() {
var templateUrl = "test-template.html",
templateReceivedCallback = function(response) {
var div = document.getElementById('template-holder'),
shadowRoot = div.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML = response;
};
$.get(templateUrl, templateReceivedCallback);
}
</script>
</body>
test-template.html将如下所示:
<div>Hello from template</div>
<script>
alert("this text is from script inside of template")
</script>
我能够在当前页面中加载提到的test-template.html,但是test-template.html里面的javascript没有执行.有没有办法让脚本运行？如果是,请分享正在运行的示例.谢谢.
我想创建一个新元素并附加到上的#container部分中connectedCallback。我this.shadowRoot.querySelector("#container")用来选择元素，但总是返回null。如何在阴影根中选择元素？
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
</head>
<body>
<dom-module id="dom-element">
<template>
<div id="container">
<p>I'm a DOM element. This is my shadow DOM!</p>
</div>
</template>
<script>
class DomElement extends Polymer.Element {
connectedCallback() {
this.attachShadow({
mode: "open"
})
console.log(this.shadowRoot.querySelector("#container"))
}
static get is() {
return "dom-element";
}
}
customElements.define(DomElement.is, DomElement);
</script>
</dom-module>
<dom-element></dom-element>
</body>
</html>使用Polymer PWA(https://polymer.github.io/pwa-starter-kit/)的最小示例(如果有),以正确显示vaadin网格是什么？我尝试了许多不同的组合,但从来没有工作过,经常会出现这样的警告:property-accessors.js:275 Polymer :: Attributes:无法将Array解码为JSON我做错了什么？谢谢安德烈
我确定我在规范中缺少一些基本知识，但是在Safari上运行的Mac上构建了大量自定义元素后，我发现它们在Firefox和Chrome上不起作用。我想念什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NoCE</title>
<script>
class NoCE extends HTMLElement {
constructor(args) {
super();
}
connectedCallback() {
this.innerHTML = "<p>It Works</p>";
}
attributeChangedCallback(name, oldValue, newValue, namespaceURI) {}
disconnectedCallback() {}
adoptedCallback() {}
static get observedAttributes() { return []; }
}
customElements.define("no-ce", NoCE, { extends: "div" });
</script>
</head>
<body>
<no-ce>
No custom elements
</no-ce>
</body>
</html>
在Safari中，页面显示“有效”。在Firefox和Chrome中，它显示“无自定义元素”（在Mac OS X上运行）。
Safari 12.0.2 Firefox 64.0.2 Chrome 71.0.3578.98
javascript firefox google-chrome web-component custom-element
是否可以实例化Web组件而无需将其注册到 CustomElementRegistry？考虑一个简单的组件：
export class MyCustomElm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot!.innerHTML = `
<div>Hello world</div>
`;
}
}
// Is it really required?
customElements.define('my-custom-elm', MyCustomElm);
我正在使用故事书来构建Web组件库。所有示例/演示都是Web组件。该代码将始终使用构造函数语法，即new MyCustomElm()初始化组件。永远不会通过纯HTML使用它。
我试图不注册该元素，但它似乎不起作用。如果在不注册组件的情况下调用了构造函数，则会引发异常。由于演示组件很多，因此想出唯一的名称很快变得很麻烦。
或者，是否有任何方法可以将Storybook用于Web组件，而不必为故事设置额外的Web组件？ （我尝试了DOM操作，但它也一发不可收拾。）
web-component ×10
javascript ×6
polymer ×4
firefox ×2
html ×2
ajax ×1
css ×1
jquery ×1
list ×1
polymer-1.0 ×1
polymer-2.x ×1
shadow-dom ×1
vaadin-grid ×1