标签: web-component
查找元素 DOM（阴影或光）根节点的最佳方法是什么
我想找到给定元素的 DOM 范围。换句话说，包含它的文档或文档片段。
有没有比下面的代码更好/更快的东西？
function getRootNode( element ){
if( document.contains(element) ){
return document;
}
var root = element;
while( root.parentNode ){
root = root.parentNode;
}
return root;
}
推荐指数
解决办法
查看次数
无法从模板获取内容
在 Javascript 中，我试图动态创建一个 HTML<template>元素，附加一个<h1>元素作为其子元素，克隆模板的内容，然后将模板附加到文档正文。
问题是当我访问content模板的属性时它只是返回#document-fragment。
这是代码：
var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';
var div = document.createElement('div').appendChild(h1)
temp.appendChild(div)
console.log('temp: ', temp)
console.log('temp content: ', temp.content)
var c = document.importNode(temp.content, true)
document.body.appendChild(c)
这是输出console.log's：
我在这里做错了什么？为什么模板的内容显示为空？
推荐指数
解决办法
查看次数
如何从 Angular 子组件内的“顶级组件”获取 DI？
创建一个“顶级组件”，充当所有模块组件的根。将自定义 HttpBackend 提供程序添加到顶部组件的提供程序列表而不是模块的提供程序。回想一下，Angular 为每个组件实例创建一个子注入器，并使用组件自己的提供程序填充注入器。
当该组件的子组件请求 HttpBackend 服务时，Angular 会提供本地 HttpBackend 服务，而不是应用程序根注入器中提供的版本。无论其他模块对 HttpBackend 执行什么操作，子组件都会发出正确的 http 请求。
确保将模块组件创建为该模块顶部组件的子组件。
如果我们打开分层依赖注入器文档的源文件，我们可以看到ACarComponent,BCarComponent并创建,和CCarComponent的三个不同实例。CarServiceCarService2CarService3
但是，如果我也在模块级别上提供，如何CarService从父组件的 DI 中获取子组件呢？BCarComponentCarService
推荐指数
解决办法
查看次数
如何在 Web 组件中使用子元素
我正在构建用于教育目的的普通 Web 组件。这是我的自定义复选框。
class Checkbox extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({mode:'open'});
this.shadow.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label></label>";
this._checked = false;
this.addEventListener("click", this.onClickHandler.bind(this));
}
set checked(value) {
if(value != this._checked) {
this._checked = value;
this.update();
}
}
get checked() {
return this._checked
}
onClickHandler(event) {
this.checked = !this.checked;
}
update() {
let svg = this.shadow.querySelector("svg");
if(this._checked)
svg.querySelector("path").setAttribute("d", "M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-8.959 17l-4.5-4.319 1.395-1.435 3.08 …推荐指数
解决办法
查看次数
：主机选择器不适用于具有shadow dom的自定义元素
我正在尝试创建一个附加有 Shadow dom 的自定义组件。自定义组件被创建并添加到带有 Shadow dom 的 dom 中，但 :host 样式不会被应用
超文本标记语言
<html>
<head></head>
<body>
<notify-user>
<h3 slot='title'>New message in #customer-support</h3>
<p>This is shadow dom in action</p>
<button>Reply</button>
</notify-user>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
JS
class Notification extends HTMLElement{
constructor(){
super();
}
connectedCallback(){
console.log('notification custom element attached to DOM');
console.log('this',this);
let nRoot = this.attachShadow({mode : 'open'});
nRoot.innerHTML = `
<style>
:host{
background-color : #3498db;
border-radius : 5px;
line-height: 1.4;
width: 25rem;
}
button {
min-width : 5rem;
padding: 0.5rem 2rem; …推荐指数
解决办法
查看次数
Web 组件，如何将 HTML 与代码分离
我想知道是否可以（我使用 ES6 和 Typescript）将我的 HTML 代码与我的组件分开，即将 HTML 代码包含到另一个文件的变量中。
目前我们正在这样的结构中编写所有 HTML：
let html = `<h1>Hello</h1> world!`
当您有大量 HTML 时，这显然不太酷。
有没有办法将我的 HTML 与 Javascript 组件分开，这样我就可以这样做：
let html = include('index.html');
推荐指数
解决办法
查看次数
LitElement 从列表中删除项目
当页面首次加载时，由以下代码生成的删除按钮按预期工作。但是，如果您更改其中一个<textarea>元素中的文本，则删除按钮将不再正常工作。我怎样才能解决这个问题？
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
static get properties() {
return {
list: { type: Array },
};
}
constructor() {
super();
this.list = [
{ id: "1", text: "hello" },
{ id: "2", text: "hi" },
{ id: "3", text: "cool" },
];
}
render() {
return html`${this.list.map(item =>
html`<textarea>${item.text}</textarea><button id="${item.id}" @click="${this.delete}">X</button>`
)}`;
}
delete(event) {
const id = event.target.id;
this.list = this.list.filter(item => item.id !== id);
}
}
customElements.define("my-element", …推荐指数
解决办法
查看次数
LitElement：在小型 Web 组件内创建许多自定义样式规则与几个动态规则时的最佳实践（或最佳性能）？
因此，我正在开发一个非常小的 Web 组件，作为更大的设计系统的一部分。
我对 Web 组件的使用有点陌生，但我知道这个特定的 Web 组件可以在单个布局中使用很多很多次。
此 Web 组件控制在传递给它的任何子组件周围放置多少垂直空间。
该组件的结构非常简单：
import { LitElement, html, css, unsafeCSS, property, customElement } from 'lit-element';
export const spacingAmounts = {
'x-small': css`4px`,
'small': css`8px`,
'medium': css`12px`,
'large': css`16px`,
'x-large': css`20px`,
'2x-large': css`30px`,
'3x-large': css`40px`,
'4x-large': css`60px`,
'5x-large': css`90px`,
'6x-large': css`120px`,
};
const createSpacingStyleRules = (direction: 'top' | 'bottom') => {
return Object.keys(spacingAmounts).map(s => {
const amount = spacingAmounts[s];
return css`
:host([${unsafeCSS(direction)}="${unsafeCSS(s)}"]) {
margin-${unsafeCSS(direction)}: ${unsafeCSS(amount)};
}
`;
});
};
@customElement('gu-vertical-space')
export class GuVerticalSpace …推荐指数
解决办法
查看次数
StencilJs 中的冒泡事件没有正确的 event.target
我前段时间开始使用 Stencil，今天我做了一个事件冒泡的实验。
基本上，我单击一个子元素并监听其父元素的mousedown。我所期望的是那event.target是我的子组件。这非常简单，例如，如果我使用常规 DOM 元素（而不是 Stencil）运行此测试，那么一切都会按预期工作
但在 Stencil 中event.target是父元素。这就是我所做的。我的父组件如下所示：
@Component({
tag: 'app-root',
styleUrl: 'app-root.scss',
shadow: true
})
export class MyApp {
@Listen('mousedown')
onMousedown(event) {
console.log(event.target, event.currentTarget);
}
render() {
return (
<div>
<my-element></my-element>
</div> );
}
}
还有孩子
@Component({
tag: 'my-element',
styleUrl: './my-element.scss',
shadow: true
})
export class MyElement {
@Listen('mousedown')
onMouseDonw(e) {
console.log(e.target);
}
render() {
return ( <div>YO</div> );
}
}
现在，正如我所说，当我单击 时my-element，我首先看到console.logfrom my-element，这证实了这event.target是 …
推荐指数
解决办法
查看次数
基于类的 Stencil 组件上的样式宿主元素
在 Stencil 中设置后shadow: true，样式宿主元素如下
:host {
color: red;
}
这有效。但现在我有以下组件
@Component({
tag: 'my-component',
styleUrl: 'my-component.scss',
shadow: true
})
export class MyComponent {
@Element() host: HTMLElement;
render() {
this.host.classList.add('is-test');
return <div>Test</div>;
}
}
在其中我将is-test类添加到宿主元素。现在，为了应用基于该类的样式，我添加了以下内容
:host {
color: red;
&.is-test {
background-color: green;
}
}
我is-test在my-component元素上看到类，但未background-color: green应用样式。我一定在这里做错了什么，任何帮助将不胜感激！
推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×7
css ×3
html ×2
lit-element ×2
shadow-dom ×2
stenciljs ×2
angular ×1
hierarchy ×1
performance ×1
polymer ×1