在我的 index.html 中，我导入了一个带有模板、Shadow DOM 等自定义 Web 组件的外部 HTML 文件。
// 索引.html
...
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<link rel="import" href="/html-components/userlogin-header.html" >
<head>
<body>
<userlogin-header username="Test User"userimage="http://domain.com/img.jpg"></userlogin-header>
...
另一个文件 userlogin-header.html：
// 用户登录-header.html
<template id="userlogin-header">
<div class="imgbox">
<img src="" class="userimage">
</div>
<div class="userinfo">
<div class="name"><span class="username"></div>
</div>
</template>
<script>
var doc = this.document.currentScript.ownerDocument,
UserLoginProto = Object.create( HTMLElement.prototype );
UserLoginProto.createdCallback = function() {
var template = doc.querySelector( "#userlogin-header" ),
box = template.content.cloneNode( true );
this.shadow = this.createShadowRoot();
this.shadow.appendChild( box );
var username = this.shadow.querySelector( '.userinfo .username' …我不明白为什么在对主机本身起作用时，像这样的伪类:focus-within需要在:host()函数括号内。为什么不能:host:focus-within div？更奇怪的是它在:host另一个:host().
class MyElementFail extends HTMLElement {
constructor(...args) {
super(...args)
this.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host{
display: block;
padding: 20px;
background-color: salmon;
}
:host div{
background-color: white;
}
/*This part is different:*/
:host:focus-within div{
background-color: green;
}
</style>
<input type="text" value="click in here"/>
<div>
Change to green
</div>`
}
}
window.customElements.define('my-element-fail', MyElementFail);
class MyElement extends HTMLElement {
constructor(...args) {
super(...args)
this.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host{
display: block;
padding: 20px; …我们知道我们可以将font-sizeon设置html为rem普通 DOM 节点的基础，我使用这个技巧使我的应用程序的字体更加灵活，可以通过 js 动态更改。
然而，当我创建一个 web 组件时，我发现rem里面的 shadow DOM 总是指 16px，即使我尝试*{ font-size:72px }在 shadow DOM 内部添加一个样式。16px 是常见的浏览器默认字体大小。
这是一个简单的演示：https : //jsfiddle.net/qmacwb6r/
<html>
<head>
<script>
var template =`
<style>
* {
font-size: 72px;
}
div {
font-size:2rem;
}
</style>
<div>
I am 2rem = 2*broser default
</div>
`
class TestTemplate extends HTMLElement {
constructor(){
super();
this.rt = this.attachShadow({mode:"open"});
this.rt.innerHTML = template;
}
}
customElements.define("test-component", TestTemplate);
</script>
</head>
<body>
<test-component></test-component>
</body> …我有
div id=outer
#shadowRoot
div id=inner
button
在按钮的点击处理程序中，我想引用 div“inner”。在非 shadowDom 世界中，这将是document.getElementById('inner')，但在 shadow DOM 世界中等价物是什么？
注意。这是从自定义元素内部访问。我不是想从外面刺穿 shadow DOM。
我有一个带有两个命名插槽的 stencilJS 组件。有没有办法确定插槽是否已分配值？例如，下面的代码片段显示了“ logo ”和“ menu ”的命名槽。如果两个命名槽都不为空，我如何检查组件内部？理想情况下，我想从组件内部和 componentWillMount() 期间进行检查。谢谢你。
<koi-menu breakpoint="768" userToggled="false">
<div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>
<ul class="nav__wrapper list mw8-ns center-m" slot="menu">
<li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
</ul>
</koi-menu>
只有一些 HTMLElements 支持约束验证 api（例如，HTMLButtonElement）。我想创建一个自定义的 web 组件，它也支持约束验证 api。
下面给出了所需结果的示例：
<form>
<input name="title" required>
<custom-form-component></custom-form-component>
</form>
<script>
const form = document.querySelector('form');
form.checkValidity();
</script>
的custom-form-component可以调用setCustomValidity其自身上（基于相应用户输入上下文）和验证本身真或假。因此，form.checkValidity()对于 的结果，对 的调用应该返回真或假custom-form-component。
正如我从文档中发现的（例如在 MDN 上），仅对于某些元素，可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。
具体问题：如何实现支持约束验证api的自定义Web组件？
web-component shadow-dom native-web-component constraint-validation
谁能解释我为什么
npm init stencil
无需在全球安装即可工作？
我习惯使用库，所有的都应该全局安装，所以我不明白为什么模板会这样工作......
我有以下代码：
export class ViTextfield extends LitElement
{
static get properties() {
return {
value: { type: String },
}
onChange(e) { console.log(e.target.value) }
render()
{
return html`
<div>
<div>
<input id="vi-input"
type="text"
value="${this.value}"
@change=${this.onChange} />
</div>
</div>
`
}
所以一切都运转良好。现在使用我的组件的开发人员应该能够通过属性设置值，例如
document.getElementById('myComponent').value = 1;
现在这带来了两个问题：1）值本身没有更新，2）onchange 没有被触发
问题1我通过改变解决了
value="${this.value}"
到
.value="${this.value}"
即使我也不知道它为什么起作用（在网上找到了这个黑客）。
但 onChange 仍然没有触发......
我的浏览器在网页中显示 JavaScript 代码，而不是我的自定义元素的预期输出。网页显示：
[object Object]
自定义元素的代码很简单：
import { LitElement } from 'https://jspm.dev/lit-element@2.3.1';
import { html } from 'https://jspm.dev/lit-html@1.2.1';
export class MyFooter extends LitElement {
createRenderRoot() {
return this;
}
render(){
return html`
foobar
`;
}
}
customElements.define('my-footer', MyFooter);
我没有使用 Node、NPM 或任何构建工具，只是从 JSPM CDN 导入 ES6 模块来加载 JavaScript。
问题总结 我在 elm 0.19.1 中使用 webcomponents。目标是让 webcomponent 在 webcomponent 属性“requeststate”发生变化时发出一个事件。事件被发出（我可以在 webcomponent 构造函数的日志中看到），但 elm 没有正确触发“WebcomponentEvent”。问题出在 windows 10 和 ubuntu 16.04、firefox 和 chrome 上。没有测试旧的 elm 版本。
重现步骤：
打开 elm-debugger 或再次单击“请求”按钮将神奇地在 elm 中触发事件。奇怪的。我也做了分支'tom-experiment'。在这个分支中，我从 webcomponent-click 工作中获得了事件，但前提是我直接点击了 webcomponent 本身。
这个问题的重要性 为什么我要通过改变一个属性来触发一个webcomponent上的事件？这种方法的目标也是 JavaScript 互操作。例如，我现在可以使用这个 webcomponent 来创建日期时间或 uuid 或做一些其他的 javascript 魔术。这样我就可以完全解决端口问题。这个问题的解决方案可能会解决整个 Javascript 互操作讨论！
代码
这是我的 Main.elm：
module Main exposing (..)
import Browser
import Html
import Html.Attributes
import …web-component ×10
javascript ×6
shadow-dom ×5
html ×3
css ×2
lit-element ×2
stenciljs ×2
elm ×1
font-size ×1
import ×1
lit-html ×1
platform ×1