我试图从Dart webComponent中的表单中获取数据.定义了以下LoginComponent.单击提交按钮时不会调用doLogin函数.尝试在提交按钮上放置点击处理程序,但这也不起作用.
<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
<form id='loginForm' on-submit='doLogin()'>
<div>
<h1>Login :</h1>
<label for="loginName">Login name</label>
<input type="text" required="required" data-bind="value:loginId" />
<label>Password</label>
<input type="password" required="required" data-bind="value:pwd" />
<input type='submit' value="Login" />
<input type='button' data-action="click:doCancel" value="Cancel" />
<span>{{errorMessage}}</span></div>
</div>
</form>
</template>
<script type="application/dart">
import 'package:web_components/web_components.dart';
import 'ouremr.dart';
import 'dart:html';
class LoginComponent extends WebComponent {
String errorMessage="";
String loginId='';
String pwd='';
}
void doLogin(e) {
print("in do login");
e.preventDefault();
print(loginId);
print(pwd);
}
void doCancel(e) {
e.preventDefault();
errorMessage=' ';
style.display='none';
} …我正在编写一个使用Polymer 1.0的辅助函数加载html文件的简单元素importHref().页面加载,但不是html呈现到页面,我得到[object HTMLDocument].
当我记录成功的回调时,导入的页面被包装在一个#document对象中(这里的术语不确定).但是,信息就在控制台中.
所以,我的问题是:如何将html呈现给页面？
元件:
<dom-module id="content-loader">
<template>
<span>{{fileContent}}</span>
</template>
<script>
Polymer({
is: "content-loader",
properties: {
filePath: {
type: String
}
},
ready: function() {
this.loadFile();
},
loadFile: function() {
var baseUrl;
if (!window.location.origin)
{
baseUrl = window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}
else
{
baseUrl = window.location.origin;
}
//import html document and assign to fileContent
if(this.filePath)
{
this.importHref(baseUrl + this.filePath, function(file){
this.fileContent = …我有一个<iron-pages>带有几个孩子的元素,每个孩子都有<section>一些文本内容.默认情况下,我可以更改元素的selected属性,<iron-pages>显示的子项<section>将相应更改.
我想在子节点上使用自定义属性来选择它们:data-page.我将关联attrForSelected="data-page"属性添加到具有不同字符串(例如)的每个子节点<iron-pages>和data-page属性home.但是,使用此系统,子项永远不会显示.即使data-page="home"具有属性的子项也不会在<iron-pages> selected属性设置为时显示home.
我选择自定义属性的错误是什么？
我正在使用这段代码:
function setShadowDOM(i, css){
[].forEach.call(document.getElementsByTagName(i), function(hostVal) {
var _root = hostVal.createShadowRoot();
_root.innerHTML = '<style>:host ' + css + '</style><content></content>';
})
}
我也读这个.
怎么解决这个？会有什么选择？
最近，我一直在使用ContentEditable开发一个简单的编辑器。该应用程序的要求很简单，唯一的例外是能够插入受常规编辑操作保护的文本块。
这些文本块无法编辑，并且必须表现为单个字符，才能在其中移动光标或将其删除。
生成的HTML的示例如下所示：
<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
"This is standard text with a "
<span class="attrib">
#shadow-root
"PROTECTED"
"_"
</span>
" block"
</div>
尽管这提供了我需要的受保护文本部分，但它有两个主要问题我无法解决：
有没有更好的方法可以做到这一点，还是无法以这种方式使用影子DOM？
我正在编写一个Chrome扩展程序，该扩展程序可以在页面加载或更改时修改元素属性。
我使用突变观察者来做到这一点。但是，在加载/更改shadow-dom（即嵌入式Twitter帖子）时，不会调用观察者的处理程序。
有没有一种方法可以在阴影域加载/更改时获取事件，或将变异观察者挂钩到该事件？
谢谢！
在connectedCallback()我的自定义元素的方法中，textContent它作为空字符串返回。
本质上，我的代码可以归结为以下内容...
class MyComponent extends HTMLElement{
constructor() {
super()
console.log(this.textContent) // not available here, but understandable
}
connectedCallback() {
super.connectedCallback() // makes no difference if present or not
console.log(this.textContent) // not available here either, but why?!
}
}
customElements.define('my-component', MyComponent);
还有HTML ...
<my-component>This is the content I need to access</my-component>
从阅读方面看，connectedCallback()这听起来好像是在将元素添加到DOM后就被调用了，所以我希望textContent属性应该是有效的。
我正在使用Chrome 63，如果有帮助...
javascript web-component web custom-element native-web-component
我刚刚开始使用Web组件,如果我理解正确,那么任何人都可以重用它们.是否有可能创建一个任何人都可以使用的组件,只需向他们的静态站点添加一段html(类似于添加JavaScript小部件的方式,只需复制粘贴几行代码),或者是否需要有人安装？或者这不是Web组件的预期用例？
我希望以下代码创建一个元素，其中包含一个div带有文本“ Hi” 的元素。
该元素出现在检查器中，但屏幕上看不到任何文本。
当我将模板从a更改template为a时，div将显示文本。我在这里做错了什么？
class MyComponent extends HTMLElement {
constructor() {
super()
const shadowRoot = this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
const div = document.createElement('div')
div.innerHTML = 'Hi'
template.appendChild(div)
shadowRoot.appendChild(template.content)
}
}
customElements.define('my-component', MyComponent)
web-component ×10
javascript ×7
polymer ×4
shadow-dom ×4
html ×3
css ×1
dart ×1
dom ×1
forms ×1
web ×1