我正在开始使用 Web 组件，并希望获取标签名称以“-component”结尾的所有元素，以便将它们注册为自定义标签。
为了获得最佳性能，我想使用 querySelectorAll而不是迭代所有元素。
但是，正如您在下面的示例中看到的那样，[tag$="-component"]没有找到该元素。
const components = document.querySelectorAll('[tag$="-component"]');
const result = document.querySelector('.result');
result.innerHTML = 'Search started<br>';
for(var i = 0; i < components.length; i++){
result.innerHTML = result.innerHTML + components[i].tagName + '<br>';
}<my-component>
<hello-world-component>
<h1>Hello, world!</h1>
</hello-world-component>
</my-component>
<div class="result"></div>如果有人知道发生了什么事并且可以让我知道，或者如果有人知道这是否可能，我将不胜感激。
我需要了解表单提交如何从自定义 Web 组件中提取数据？
我尝试了以下步骤
1- 将输入附加到ShadoWroot
2- 使用表单关联的概念将输入值和名称与表单连接起来
3- 最后提交表单以获取FormData。
不幸的是，它没有成功。我没有从FormData
// https://web.dev/more-capable-form-controls/
// https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/
// https://html.spec.whatwg.org/#custom-elements
let form = document.getElementById('frm');
// on form submit I need to recive form data from the input by getting name and its value
form.addEventListener('submit', (event) => {
event.preventDefault();
var formData = new FormData(form);
// Display the key/value pairs
for (const pair of formData.entries()) {
console.log(`${pair[0]}, ${pair[1]}`);
}
});
// I need here to assign value to form data using …备选问题版本:在Polymer元素定义中添加时,如何防止HTML实体被转义？
因此,假设这个简化的例子(所有包含的聚合物库都添加在实际代码中):
元素定义
<polymer-element name="x-test" attributes="val">
<template>
<div>{{shownVal}}</div>
</template>
<script>
Polymer( 'x-test', {
shownVal: '',
valChanged: function(){
this.shownVal = this.val + ' &';
}
});
</script>
</polymer-element>
元素用法
<x-test val="123"></x-test>
这将产生如下输出:
123&
版本:聚合物0.1.2
我需要更改/添加什么输出123 &？
或者这是一种什么样的错误,我应该让Polymer人知道吗？
我知道,我可以添加实体<template>,这可以工作,但我有一些代码,它修改输入属性,需要使用实体.
<x-test val="123 &"></x-test>
一切都很好.
任何人都可以告诉我如何根据Polymer属性的值导入元素？我以为我可以使用数据绑定但是...它不起作用.是否可以动态导入元素？
代码示例:
<link rel="import" href="app-window/{{name}}-app.html">
//This was my first idea (obviously doesn't work)
<polymer-element name="window-base" attributes="name" >
<template>
<link rel="stylesheet" href="window-base.css">
<section id="app">
<!--here will go the instance-->
</section>
</template>
<script>
Polymer('window-base', {
name: "Finder",
ready: function () {
this.instanceApp();
},
instanceApp: function () {
//this depends on the import made
var app=document.createElement(this.name + "-app");
this.$.app.appendChild(app);
}
});
</script>
</polymer-element>
谢谢!
您好我想从使用Polymer的本机HTML元素扩展以创建自定义Web组件.当我没有扩展时,我的聚合物就绪回调就被调用了.一旦我延伸,就不会再调用任何东西了.虽然正在创建元素的阴影DOM ...
这是我的用法代码:
<!DOCTYPE html>
<html>
<head>
<title>Custom Component Usage</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="elements/extended-item.html">
</head>
<body>
<extended-item>I was extended from div!</extended-item>
</body>
</html>
自定义元素,扩展div:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="extended-item" extends="div">
<template>
<content></content>
</template>
</polymer-element>
<script>
Polymer('extended-item',
{
created: function ()
{
console.log('EXTENDED ITEM IS CREATED!');
},
ready: function ()
{
console.log('EXTENDED ITEM IS READY!');
},
attached: function ()
{
console.log('EXTENDED ITEM IS ATTACHED!');
},
domReady: function ()
{
console.log('EXTENDED ITEMS DOM IS READY!');
},
detached: function () …在注册事件监听器时attachedCallback,我有责任确保再次删除这些监听器detachedCallback吗？
如下面的最小样本所示,模式是可预测的,所以我想知道浏览器是否已经处理了这个问题？
<my-element>0</my-element>
class MyElement extends HTMLElement {
createdCallback() {
this.update = this.update.bind(this);
}
attachedCallback() {
this.addEventListener("click", this.update);
}
detachedCallback() {
this.removeEventListener("click", this.update);
}
update() {
this.textContent = Math.random();
}
}
document.registerElement("my-element", {
prototype: MyElement.prototype
});
我正在使用knockout.js组件和require.js.这到目前为止运作良好,但我正在努力解决以下问题.
假设我在一个非常简单的html页面中有一个我的组件实例:
<div id="exams">
<databound-exam-control></databound-exam-control>
</div>
从包含viewmodel:
require(['knockout', 'viewModel', 'domReady!'], function (ko, viewModel) {
ko.components.register('databound-exam-control', {
viewModel: { require: 'databound-exam-control-viewmodel' },
template: { require: 'text!databound-exam-control-view.html' }
});
ko.applyBindings(new viewModel());
});
我希望获得子视图模型内容,以便稍后在单击按钮时保存页面的所有数据.
现在我只想在pre标签中显示父/子视图模型的显示:
<div>
<pre data-bind="text: childViewModel()"></pre>
</div>
在包含viewmodel的帮助下:
function childViewModel() {
var model = ko.dataFor($('databound-exam-control').get(0).firstChild);
return ko.toJSON(model, null, 2);
};
在调用ko.dataFor期间出现以下错误,可能是因为页面未完全呈现:
除非指定"写入"选项,否则无法将值写入ko.computed.如果要读取当前值,请不要传递任何参数.
是吗？或者我完全错过了这里的观点？
任何帮助赞赏.
HTMLImports.whenReady 和之间有什么区别window.addEventListener('WebComponentsReady', function(e) {？
“要在您的主HTML文档中定义元素，请从HTMLImports.whenReady（callback）定义该元素。当文档中的所有导入均已完成加载时，将调用回调。”
在本机导入下，主文档中的标签会阻止加载导入。这是为了确保导入已加载，并且其中的所有注册元素都已升级。这种本机行为很难进行polyfill，因此“ HTML导入” polyfill不会尝试。而是WebComponentsReady事件是此行为的代表：
两者有什么区别？
javascript web-component polymer custom-element html-imports
考虑一下,我使用Shadow DOM隐藏其内部div-soup和布局的元素很少.
即使是艰难的,它们也是不同的,它们共享相同的CSS样式表,因为它们使用的是相同的元素集,这些元素应该以一致的方式进行样式化.例如,这可以是CSS框架(引导程序).
问题是这个样式表非常大.
在许多Shadow Roots(在SD V1中)之间分享如此大样式表的最有效方法是什么？
我正在尝试为我的UI项目之一使用本机Web组件，并且对于此项目，我没有使用任何框架或库（例如Polymer等）。我想知道在两者之间有什么最佳的交流方式或其他方式像我们在angularjs / angular中所做的那样的Web组件（例如消息总线概念）。
当前，在UI Web组件中，我正在使用dispatchevent发布数据和接收数据，正在使用addeventlistener。例如，有2个Web组件，ChatForm和ChatHistory。
// chatform webcomponent on submit text, publish chattext data
this.dispatchEvent(new CustomEvent('chatText', {detail: chattext}));
// chathistory webcomponent, receive chattext data and append it to chat list
this.chatFormEle.addEventListener('chatText', (v) => {console.log(v.detail);});
请让我知道实现此目的的其他方法。任何可以轻松与本机UI Web组件集成的优秀库，如postaljs等。
html javascript web-component custom-element native-web-component
web-component ×10
javascript ×9
html ×5
polymer ×4
css ×1
dom ×1
form-data ×1
html-imports ×1
knockout.js ×1
requirejs ×1
shadow-dom ×1