标签: web-component
dom-repeat 渲染完成后运行一个方法
我有一个显示记录的 dom-repeat 元素，我想在 dom-repeat完成后运行一个操作。这样我就可以运行：
this.$.content.scrollTop = this.$.content.scrollHeight;
（这是一个聊天系统，不向下滚动到最后一个是愚蠢的）。
这是一个相当普通的 dom-repeat 模板......我尝试将自己作为它的过滤器，或者观察数据，但在所有情况下，我在渲染发生之前被调用。
这是 dom-repeat —— 我该怎么做？
<div class="content" id="content">
<div class="container-fluid">
<template is="dom-if" if="[[!_dataThere(data)]]">
<my-empty-list icon="question-answer" message="You haven't talk to this user yet. (You can do it now!)"></my-empty-list>
</template>
<hot-network manage-errors>
<iron-ajax id="aj" auto url="{{_makeUrl(userId,userData.generic.id)}}" handle-as="json" last-response="{{data}}"></iron-ajax>
<template is="dom-if" if="[[_dataThere(data)]]">
<template is="dom-repeat" items="[[data]]">
<div class$="message {{_theirsOrMine(item)}}">
<div class="message-inner">
<div class="avatar"></div>
<div class="bubble">{{ item.message}}</div>
</div>
<div class="meta">{{_formattedDate(item.added)}}</div>
</div>
</template>
</template>
</hot-network>
</div>
</div>
推荐指数
解决办法
查看次数
创建和使用自定义 HTML 组件？
我有以下本地 html：
<html>
<head>
<link rel="import" href="https://mygithub.github.io/webcomponent/">
</head>
<body>
<!-- This is the custom html component I attempted to create -->
<img-slider></img-slider>
</body>
</html>
以及对模板的以下尝试：
<template>
<style>
.redColor{
background-color:red;
}
</style>
<div class = "redColor">The sky is blue</div>
</template>
<script>
// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template');
// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);
// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = …推荐指数
解决办法
查看次数
StencilJS 组件可以使用外部主题吗？
我正在尝试使用 StencilJS 为我正在处理的多个项目创建可重用的 Web 组件。但是我很难将颜色主题从我的主要应用程序继承到我的 Stencil 按钮组件。示例：我想为我的应用程序使用不同的主要和次要着色，这些应用程序适用于我的 Stencil 组件，如主要彩色按钮。但是我该如何做到呢？我正在使用 sass 样式，并在我的 Stencil 项目中使用我的主题在本地设置了主要变量。但是我不知道如何在编译后导入外部sass/css文件。
<my-button color="primary">This is a primary button</my-button>
推荐指数
解决办法
查看次数
如何访问嵌套 Web 组件的锚点？
我正在为我的 Web 组件实现 Orchestrator 模式，如下所示：
<body>
<my-controller>
<div>
<my-list>
<span>
<my-item></my-item>
</span>
</my-list>
</div>
</my-controller>
</body>
我创建的所有自定义元素都使用 Shadow DOM 使用const root = super.attachShadow({mode: "open"}); root.appendChild(...);.
从我的内部 Web 组件中，我想在以下位置访问我的my-controller组件connectedCallback()：
public connectedCallback(): void
{
if (this.isConnected)
{
for (let node = this.parentElement; node; node = node.parentElement)
if (node instanceof ContainerBase)
{
this._service = (<ContainerBase>node).GetService(this);
break;
}
if (this._service) this.Reset();
else throw new ReferenceError(`${this.nodeName.toLowerCase()}: Couldn't find host element while connecting to document.`);
}
}
奇怪的是：我只能访问直接父网络控件。
所以，如果connectedCallback() …
javascript google-chrome web-component shadow-dom custom-element
推荐指数
解决办法
查看次数
在 Salesforce（兔子洞）上检查时，阴影 DOM 未显示在带有阴影根的自定义元素中
我试图了解 Salesforce 如何实施他们的自定义闪电组件元素。我已经阅读了一些帮助文档，这些文档暗示他们遵循 webcomponents 标准。
当我检查页面时：
所以这看起来像典型的 DOM 结构，但是当你进入控制台并查看闪电图标时，它说除非你进入 shadow dom，否则没有 childNodes：
> document.querySelector('lightning-icon.slds-icon-standard-home').childNodes
> NodeList {Symbol(items): Array(0)}
> document.querySelector('lightning-icon.slds-icon-standard-home').shadowRoot.childNodes
> NodeList {0: lightning-primitive-icon, Symbol(items): Array(1)}
现在，通常如果有一个 shadow root 和一个文档片段，它在检查器中作为 #shadow-root (open) 清晰可见。根据此处的 Mozilla 示例：https : //mdn.github.io/web-components-examples/popup-info-box-web-component/
我还注意到自定义元素不是注册的自定义元素。并且SF已经实现了自己的组件库等......
我想知道这是怎么回事？如果节点存储在那里，为什么不显示 #shadow-root 以及如何在纯 JS 中实现自定义元素，以便我可以重新创建。
谢谢！
html javascript web-component shadow-dom salesforce-lightning
推荐指数
解决办法
查看次数
为什么我的自定义元素的所有 css 在 Chrome 开发工具中都显示为用户代理样式表？
当我在 Chrome 中检查我的自定义元素时，元素的样式和所有内部元素在样式面板中显示为“用户代理样式表”。
javascript google-chrome web-component google-chrome-devtools custom-element
推荐指数
解决办法
查看次数
pdf.js 为 Web 组件导入未定义
我正在尝试使用 lit-html 编写一个 Web 组件，它将使用 pdf.js 渲染用户选择的 PDF 文件。但是 pdf.js import 给了我以下错误：
import 'pdfjs-dist/build/pdf.js';
TypeError: "root is undefined"
webpackUniversalModuleDefinition http://localhost:8003/node_modules/pdfjs-dist/build/pdf.js:21
<anonymous> http://localhost:8003/node_modules/pdfjs-dist/build/pdf.js:21
如果我在 html 文件中使用 pdf.js 的脚本标签，我可以渲染 pdf 文件。
推荐指数
解决办法
查看次数
如何在 Stencil.js 中使用外部第三方库
我有一个 Stencil 组件，作为其业务逻辑的一部分，我需要使用外部 Javascript 文件mylib.js。Javascript 文件包含一些 Stencil 组件应该使用的业务逻辑。
这是我的组件：
import { Component, Element, Prop, h, Host } from '@stencil/core';
import moment from 'moment';
import mylib from 'src/js/mylib.js';
@Component({
tag: 'dashboard-widget',
styleUrl: 'dashboard-widget.css',
shadow: false
})
export class DashboardWidget {
@Element() el: HTMLElement;
@Prop() canvas: HTMLElement;
@Prop() channelName: string = "";
@Prop() channelValue: string = "";
@Prop() isBlinking: boolean = true;
componentDidLoad() {
console.log(mylib.test());
}
render() {
return (
<Host>
<div class="card-content card-content-padding">
<b>{this.channelName}</b>
<h1 class="dashboard-card-value">{this.channelValue}</h1>
<canvas class="dashboard-card-canvas"></canvas>
</div> …推荐指数
解决办法
查看次数
“299742-nowjedi-hello”不是有效的自定义元素名称
我对组件开发很陌生，并且正在努力打印一个简单的 hello world。有人能帮我吗？
重现步骤：
1. now-cli login --host stack.service-now.com
2. now-cli project --name nowjedi-hello -- description 'A web component printing Hello World'
3. npm install
4. now-cli develop --open
返回：
SyntaxError: Failed to execute 'define' on 'CustomElementRegistry': "299742-nowjedi-hello" is not a valid custom element name
我正在关注“开发你的组件”。知道发生了什么吗？ https://developer.servicenow.com/dev.do#!/guide/orlando/now-experience/cli/development-flow/。
推荐指数
解决办法
查看次数
如何在没有 attachShadow 的情况下创建自定义元素？
假设我有一些这样的代码：
class MyElem extends HTMLElement {
constructor() {
super();
let templateContent = document.getElementById('template-elem').content;
this.innerHTML = templateContent.cloneNode(true);
}
}
window.customElements.define('my-elem', MyElem);<template id="template-elem">
<div class="a">
<div class="b">b</div>
<div class="c">c</div>
</div>
</template>
<my-elem></my-elem>为什么这不起作用？在 Chrome 检查器中，自定义元素内部没有 HTML。我也试过这样做：
this.append(templateContent.cloneNode(true));
但这也导致了一个空的 HTML 树。
所有教程都提到使用 shadow DOM，如下所示：
this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true));
虽然这样做有效，但它会强制您将 Shadow DOM 用于您的自定义元素。有没有办法在不需要使用 Shadow DOM 的情况下将模板的 HTML 附加到您的自定义元素？我更喜欢在我的小用例中使用全局 CSS 样式。
推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×8
html ×3
shadow-dom ×3
stenciljs ×2
components ×1
css ×1
dom ×1
lit-html ×1
pdf ×1
pdf.js ×1
polymer ×1
reactjs ×1
sass ×1
templates ×1
webpack ×1