我无法让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也不会启动警报.
AMP页面是否可以与非正式的自定义组件一起使用？
我可以想象得到一个官方版本最适合传播使用,但对于只想要在一些自定义组件中编程的1个网站,是否需要将其组件批准为官方版本,或者它可以只创建一个并将其包含在自己的代码中？
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md
我目前正在尝试使用最新的稳定Chrome 52来学习如何使用Web组件(不使用Polymer)(我还尝试使用Chrome 52上的webcomponents.js polyfill).但是,当我这样做时,我似乎得到querySelector的错误.当我试图在控制台中获取(document.querySelector('#template')通常名称命名很差的模板ID)时,它是null并且无法找到它.
我正在使用本指南,尽管有一些ES6语法.(我也试过直接复制和粘贴,它有同样的问题)
我也尝试在shadowDOM中搜索,但它也不存在.
view.html
<template id="template">
<style>
</style>
<div class="container">
<h1>WZView</h1>
</div>
</template>
<script>
"use strict";
class WZView extends HTMLElement {
createdCallback () {
var root = this.createShadowRoot();
var template = document.querySelector('#template');
root.appendChild(document.importNode(template.content, true));
}
}
document.registerElement('wz-view', WZView);
</script>
的index.html
<!DOCTYPE html>
<html>
<head>
<!--<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>-->
<link rel="import" href="view.html">
</head>
<body>
<wz-view></wz-view>
</body>
</html>
安慰:
view.html:16 Uncaught TypeError: Cannot read property 'content' of null
> document.querySelector('#template')
null
我有一些我希望作为组件显示的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
当我创建一个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> …我有一个像这样的Web组件
<template id="component">
<link href="/static/css/main.cacbacc7.css" rel="stylesheet">
<script src="/static/js/vendor.js" type="text/javascript"></script>
<script src="/static/js/bundle.js" type="text/javascript"></script>
<span id="react-app"></span>
</template>
<script>
(function (window, document) {
const doc = (document._currentScript || document.currentScript).ownerDocument;
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function () {
const template = doc.querySelector('template#component').content;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.cloneNode(true));
// executeThis() when all scripts have been loaded
}
},
});
document.registerElement('react-webcomponent', { prototype: proto });
})(window, document);
</script>
我可以知道我的所有script标签何时template被加载？
更新
我目前正在做的是
const scripts = [...shadowRoot.querySelectorAll('script')];
let …我正在迈入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>;
}
亲切的问候
由于Html-Imports现已在Chrome(https://www.chromestatus.com/feature/5144752345317376)中弃用,并且将被删除,我想知道其他选择是什么.
我目前正在使用Html-Imports导入Html模板.到目前为止,我只看到两种选择:
是否有一种新的香草方式来导入Html模板？(通过"vanilla"我基本上意味着没有任何其他工具,如预编译器或捆绑器参与)
以下起点：
我们有一些有角度的前端微服务，现在我们希望将它们整合到一个应用程序中。我们正在尝试使用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 ×6
html ×3
html5 ×2
shadow-dom ×2
amp-html ×1
angular ×1
angularjs ×1
html-imports ×1
lifecycle ×1
polymer ×1
polymer-2.x ×1
stenciljs ×1