我正在研究 Angular 4.0，并且我已经用 Polymer 做了一些 Web 组件。从用例的角度来看，Polymer 中的角度组件和自定义元素看起来是相同的。角度组件还提供一些特定于框架的生命周期回调。
如果有的话有什么区别？
是否可以选择开槽元素中的后代元素？
像这样的例子：
::slotted(div p) {
color: blue;
}
<div><p>test</p><div>
这不起作用
使用自定义元素，我想对自定义元素内的元素进行样式设置，但是当我定义该元素时，除了影子 dom 之外的所有内容都会消失。
如何将内容从元素移动到 Shadow dom？我已经<div class="wrapper">在阴影内有一个包装元素 ( )，但尝试使用
wrapper.innerHTML = this.innerHTML;
不起作用。
超文本标记语言
<site-card>
<section title>
...
</section>
<section body>
...
</section>
<section actions>
<button class="modern small">Action</button>
<button class="modern small">Action 2</button>
</section>
</site-card>
JS
"use strict";
class cardElement extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
var wrapper = document.createElement('div');
wrapper.setAttribute('class','wrapper');
wrapper.innerHTML = this.innerHTML;
var style = document.createElement('style');
style.textContent = ... /* CSS removed to shorten. */
shadow.appendChild(style);
shadow.appendChild(wrapper);
};
};
customElements.define('site-card', cardElement);
一些背景： 我正在尝试在 React 应用程序中使用自定义 Web 组件并尝试侦听来自 Web 组件的事件。我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件。
IE
<custom-button onClick={this.clickHandler}></custom-button>.
我试过这个，但没有用。
问题： 所以，我正在尝试通过addEventListener监听事件，就像在 vanilla js 中所做的那样，但事件处理程序永远不会被调用。
下面是一个例子。我知道<button/>这不是自定义 Web 组件，但它说明了问题：
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.buttonRef = React.createRef();
}
componentDidMount() {
// there are no errors attaching the handler
this.buttonRef.current.addEventListener("onClick", e => {
// this point is never reached
debugger;
console.log("onClick", e);
});
}
render() {
return <button ref={this.buttonRef}>click me</button>;
}
} …鉴于3个@angular项目全部使用v6.1.9： ，host，alpha和beta
alpha并beta使用 @angular/elements 创建和定义一个 web 组件，如下所示：
constructor(private injector: Injector) {}
ngDoBootstrap() {
const config: NgElementConfig = { injector: this.injector };
const component= createCustomElement(component, config);
customElements.define("alpha-component", component); // beta-component respectively
}
alpha并beta使用ng build --prod --output-hashing none构建，然后运行后构建脚本以按以下顺序连接生成的文件：scripts.js, styles.js, runtime.js, main.js。
polyfills.js 被跳过，因为main.ts在加载库时会检查所使用的 polyfills 是否已经定义（例如避免尝试重新定义 zone.js）。
得到的束是alpha-component.bundle.js和beta-component.bundle.js。
host引用了上述束<head>的index.html与<script defer>标签。
如果以alphathen的顺序引用包beta，我会看到 …
我想从我的 Web 组件中的一个元素执行一个定义的类函数：
customElements.define('first-component', class FirstComponent extends HTMLElement {
constructor() {
super();
}
log() {
console.log('Well Done!')
}
connectedCallback() {
this.innerHTML = '<button onclick="log()">Do it</button>'
}
});
现在状态：ReferenceError：未定义日志
我想开始利用现在所有主要 Web 浏览器都支持的http://webcomponents.me W3C 标准。
我研究了互联网，到目前为止我发现了以下框架：
模板 - 由离子创建。所有离子组件都使用这个框架/编译器来构建原生支持的 Web 组件。
lit-element - 由 Google 创建，是 Polymer 框架的一部分。
SkateJS - 不知道这背后的原因，但它位于前 3 名流行的 Web 组件框架中。
有人可以给我建议或意见哪个框架最好吗？
javascript web-component stenciljs native-web-component lit-element
在本文的帮助下，我使用包含@Input和 的angular 元素创建了一个小型 Web 组件@Output。
我能够将数据传递给@Input属性，但监听@Output事件让我发疯，因为我无法弄清楚如何从回调事件参数中读取数据。
//Emitting the boolean data
likeEvent() {
this.likeNotify.emit(true);
}
在纯 javascript 中，我正在听像这样的 likeNotify 事件：
const el = document.querySelector('facebook-card');
el.addEventListener('likeNotify', e => {
console.log(e.currentTarget.data); // Not working
});
那么如何从从发射器传递的 e 对象中检索真/假值？
javascript web-component angular angular-event-emitter angular-elements
我正在制作一个自定义元素，并且一直在寻找一种向:host与 shadow DOM 关联的伪类添加更多特异性的方法。根据我的理解，它用于选择实际的自定义元素本身。例如，如果我有一个被调用的元素my-elem附加了一个 shadow DOM，那么:host伪类就相当于my-elem全局样式表中的一个类。
从这个我想尝试，并进一步明确的选择，这样我可以风格在他们的状态自定义元素，例如：:host:not(.active)。但是，我真的找不到任何关于进一步具体的阅读，:host并且使用上述内容不起作用。
我也尝试过传统的:host.active，甚至是厚脸皮的，:host[active]但都没有奏效。
所以我想问一下这是否可能。我已经在网上进行了一些搜索，但网上似乎并没有太多关于此事的信息，我觉得这可能是不可能的，所以我可能不得不降级并将活动类应用于包装器状态更改时的自定义元素。
我只是想这样做，因为它允许我以编程方式从其父元素设置元素的样式（我将活动/非活动样式应用于自定义元素表单的自定义幻灯片）。
先感谢您。
我是 Web 组件的新手，我注意到一些示例在自定义元素的构造函数中设置了 dom，而其他示例则在 connectedCallback 中进行设置。由于两者似乎都可以正常工作（尽管我只尝试了 Chrome），我认为主要区别在于用户在 js 中创建元素而不将其附加到页面的情况？
我想这里的主要问题是我是否遗漏了一些其他原因来偏爱一种方法而不是另一种方法。
谢谢。
web-component ×10
javascript ×7
angular ×3
css ×2
html ×1
lit-element ×1
pseudo-class ×1
reactjs ×1
shadow-dom ×1
stenciljs ×1