我无法让JavaScript在我正在定义的Shadow DOM元素中正常运行.给出以下代码:
<template id='testTemplate'>
<div id='test'>Click to say hi</div>
<script>
var elem = document.querySelector('#test');
elem.addEventListener('click', function(e) {
alert("Hi there");
});
</script>
</template>
<div id="testElement">Host text</div>
<script>
var shadow = document.querySelector('#testElement').createShadowRoot();
var template = document.querySelector('#testTemplate');
shadow.appendChild(template.content.cloneNode(true));
</script>
document.querySelector返回null.如果我将它包装在document.onload中它不再抛出错误,但是单击div也不会启动警报.
我有一些我希望作为组件显示的HTML,因为我没有操纵DOM.
作为一个指令,它工作正常,但作为一个组件,它没有.我以前做过组件没有问题,只是看不出这里的问题.如果我在组件代码中注释,并且指令输出,则它不起作用.
知道我做错了什么吗？
(function() {
"use strict";
angular
.module('x.y.z')
// .component('triangularStatus', {
// bindings: {
// value: '=',
// dimension: '=?'
// },
// templateUrl: '/path/to/triangular-status.html',
// controller: TriangularStatusController,
// controllerAs: 'vm'
// });
.directive('triangularStatus', triangularStatus);
function triangularStatus() {
var directive = {
scope: {
value: '=',
dimension: '=?'
},
replace: true,
templateUrl: '/path/to/triangular-status.html',
controller: TriangularStatusController,
controllerAs: 'vm',
};
return directive;
}
TriangularStatusController.$inject = [];
function TriangularStatusController() {
var vm = this;
}
})();
javascript web-component angularjs angular-directive angular-components
我最近一直在探索 Angular 组件对 css 和 dom 的封装。
我使用 ng-cli 搭建了一个快速项目并加载了一个组件。假设组件选择器是“app-component”。这封装了与该组件有关的所有 dom 和 css。到目前为止一切都很好。
我从之前的阅读中了解到，组件既不允许外部 CSS 渗入，也不允许内部 CSS 渗出（这更特定于 Web 组件）
现在，在 index.html 文件中，我包含了一个 bootstrap css 文件，只是为了观察 bootstrap css 中的样式是否渗入组件中，令我惊讶的是它确实发生了。我可以使用在我的组件中提供引导 css 的所有类。
为什么会这样？本质上，外部 css 正在渗透到组件中。我了解 Angular 中的视图封装概念，但这不适合。
听起来有点天真，但可能是我在这里遗漏了一点！
编辑
基本上我指的是这个：
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
这说：
作用域 CSS：在 shadow DOM 中定义的 CSS 是作用域的。样式规则不会泄露，页面样式也不会渗入。
当我创建一个Polymer 2.0元素时,只有ready生命周期回调似乎会触发,我无法理解为什么.例如,我有这个Polymer元素:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="flip-four-board">
<script>
class FlipFourBoard extends Polymer.Element {
static get is() { return "flip-four-board"; }
created() {
super.created();
console.log("created");
}
ready() {
super.ready();
console.log("ready");
}
attached() {
super.attached();
console.log("attached");
}
detached() {
super.detached();
console.log("detached");
}
}
customElements.define(FlipFourBoard.is, FlipFourBoard);
</script>
</dom-module>
但是当我将它插入这样的页面时:
<!DOCTYPE html>
<html>
<head>
<title>Flip Four Board Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../flip-four-board.html">
<style type="text/css">
html, body {
width: 95%;
height: 95%;
}
</style>
</head>
<body>
<flip-four-board></flip-four-board>
</body>
</html> …我正在使用 ES5 制作一个扩展HTMLAnchorElement. 由于 Web 组件仅适用于 ES6 及更高版本，因此我在此处包含了 ES5 polyfill 。
制作一个扩展的 web 组件，HTMLElement然后在页面上使用它的标签工作正常。但是扩展除此之外的任何元素HTMLElement似乎都不起作用。
我正在使用最新版本的谷歌浏览器来测试这个。
下面是我的扩展元素的代码HTMLAnchorElement。
function CustomAnchor() {
HTMLAnchorElement.call(this);
}
CustomAnchor.prototype.connectedCallback = function () {
console.log('anchor added to dom');
this.addEventListener('click',
function(e) {
console.log('test');
e.preventDefault();
var result = confirm('Confirmed!');
}
);
};
window.customElements.define('custom-anchor', CustomAnchor, {extends: 'a'});
这是创建元素并将其添加到 DOM 的代码：
var el1 = document.createElement("a")
el1.setAttribute("is", "custom-anchor")
el1.setAttribute("href", "http://www.google.com/")
el1.text = "Go to Google"
document.body.appendChild(el1)
这是 DOM 中显示的内容，看起来是正确的：
<a is="custom-anchor" href="http://www.google.com/">Go to …注册后是否可以修改自定义元素/Web 组件类？这不是我通常（或永远）想要在生产代码中做的事情，但是在原型设计或实现用于开发的代码修补工具时，它会很有用。到目前为止，这是我尝试过但未成功的方法：
document.body.appendChild(document.createElement('foo-bar')) // empty element
class FooBar extends HTMLElement {
connectedCallback () {
this.textContent = 'foo bar'
}
}
customElements.define('foo-bar', FooBar) // element shows "foo bar"
FooBar.protoype.connectedCallback = function () {
this.textContent = 'foo bar 2'
}
document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"
customElements.get('foo-bar').protoype.connectedCallback = function () {
this.textContent = 'foo bar 2'
}
document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"
class FooBar2 extends HTMLElement {
connectedCallback () {
this.textContent = 'foo …我正在迈入Web组件的第一步，而未使用任何第三方库（例如Polymer）。主要卖点之一是Web组件样式与其他地方定义的样式分开，从而允许在类似于沙盒的环境中对组件的shadow-DOM进行样式设置。
我遇到的问题是样式如何通过插槽元素级联。由于带槽的元素不是影子DOM的一部分，因此只能用::slotted()组件模板中的选择器对其进行定位。这很棒，但是几乎不可能保证Web组件在所有上下文中都能正确显示，因为外部定义的样式还具有无可比拟的专一性*应用于空位元素。
*此外!important。
这个问题可以归结为：
customElements.define("my-nav",
class extends HTMLElement {
constructor() {
super();
const template = document.querySelector("template#my-nav").content;
this.attachShadow({ mode: "open" })
.appendChild(template.cloneNode(true));
}
}
);a {
color: red; /* >:( */
}<template id="my-nav">
<style>
.links-container ::slotted(a) {
color: lime;
font-weight: bold;
margin-right: 20px;
}
</style>
<div class="links-container">
<slot name="links"></slot>
</div>
</template>
<p>I want these links to be green:</p>
<my-nav>
<a href="#" slot="links">Link 1</a>
<a href="#" slot="links">Link 2</a>
<a href="#" slot="links">Link 3</a>
</my-nav> …javascript html5 web-component shadow-dom native-web-component
我目前正在尝试使用StencilJS来创建一些Web组件.
现在我知道有<slot />和名称插槽和所有东西.来自React,我猜插槽与React中的儿童类似.你可以在React中使用孩子做很多事情.我经常做的事情:
你会如何使用插槽/网络组件/ stencilJS？
我可以使用Stencil获取我的Web组件的主机元素
@Element() hostElement: HTMLElement;
我使用我的组件
<my-custom-component>
<button>1</button>
<button>2</button>
<button>3</button>
</my-custom-component>
我想渲染类似的东西
render() {
return slottedChildren ?
<span>No Elements</span> :
<ul class="my-custom-component">
slottedChildren.map(child => <li class="my-custom-element>{child}</li>)
</ul>;
}
亲切的问候
我正在尝试创建一个包装器自定义元素，将其子自定义元素包装到 div 中。
但子元素没有被包装。相反，一个空的 div 被插入到子元素之前的包装元素中
<script>
class ListItem extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = "<div>ListItem</div>";
}
}
class List extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `<div class="list">${this.innerHTML}</div>`;
}
}
customElements.define("list-item", ListItem);
customElements.define("my-list", List);
</script>
<my-list>
<list-item></list-item>
<list-item></list-item>
<list-item></list-item>
</my-list>
这是结果：
<my-list>
<div class="list"></div>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
</my-list>
我本来期望的是以下内容：
<my-list>
<div class="list">
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
<list-item><div>ListItem</div></list-item>
</div>
</my-list>
你可以在这里尝试一下。
以下起点：
我们有一些有角度的前端微服务，现在我们希望将它们整合到一个应用程序中。我们正在尝试使用Angular-Elements方法，并且已导出其中一个产生了巨大的JS文件的微服务。
问题
当我们在“将其放在一起”项目中包含角度元素时，仅在dom中包含“ router-outlet”标签，而不会呈现任何html。
码
自定义元素：
app.module.ts：
import {NgModule, Injector} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {PhoneModule} from "./features/phone/phone.module";
import {createCustomElement} from '@angular/elements';
import {Router} from '@angular/router';
@NgModule({
declarations: [
AppComponent,
],
imports: [
AppRoutingModule,
PhoneModule,
],
entryComponents: [AppComponent],
})
export class AppModule {
constructor(private injector: Injector, private router: Router) {
this.router = router;
}
ngOnInit() {
this.router.initialNavigation();
}
ngDoBootstrap() {
const customElement = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('phone-contracts', customElement);
}
}
app-routing.module.ts：
import …web-component ×10
javascript ×7
html ×3
angular ×2
dom ×2
html5 ×2
shadow-dom ×2
angularjs ×1
lifecycle ×1
polymer ×1
polymer-2.x ×1
stenciljs ×1