标签: web-component
Vanilla JS Web 组件包括 <head> 和 <body>
是否可以将head和body作为 Web 组件的元素包含在内？
我尝试了下面的示例，但web-html放置在body内，而head为空：
索引.html：
<!doctype html>
<html>
<web-html></web-html>
<script type="module" src="html.js"></script>
</html>
html.js：
customElements.define('web-html', class extends HTMLElement {
constructor() {
super();
const template = document.createElement('template');
template.innerHTML = `
<head>
<meta charset="utf-8" />
<title> Index </title>
</head>
<body>
<slot> ... </slot>
</body>
`;
const shadowRoot = this.attachShadow({mode:'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
};
});
推荐指数
解决办法
查看次数
将变量传递给自定义 Svelte Web 组件
我使用 Svelte 创建了简单的自定义 Web 组件。它已经编译好了，看起来应该可以很好地工作，但是有困难。我试图将一些变量传递给 prop，但总是未定义，但是如果我传递一些字符串
结果.svelte 组件
<svelte:options tag="svelte-result" />
<script>
export let result = {metadata: {}, transfers: []};
export let string = 'no string';
</script>
<div class="result__wrapper">
{string}
<div class="result__metadata">
<div>{result.metadata.offset}</div>
<div>{result.metadata.limit}</div>
<div>{result.metadata.total}</div>
</div>
</div>
当它编译时我使用它就像
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Svelte test</title>
<script defer src="/svelte/wapi-client/svelte-component.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script>
const data = {
metadata: {
limit: 20,
offset: 0,
total: 311301
},
transfers: …推荐指数
解决办法
查看次数
在非 Vue Web 应用程序中嵌入 Vue 应用程序（或 Vue Web 组件）
我对 Vue 非常陌生，并且接到的任务是创建一些可以嵌入到几个现有的非 Vue 遗留 Web 应用程序中的 Vue 小部件。我们的想法是，我们将创建一个这些小部件的库，然后将其嵌入到任何一个遗留应用程序中，最终我们可能会将整个应用程序迁移到 Vue。
我一直在寻找最好的前进方向，但我有点困惑。我想这些是我的问题：
我是否需要在这里考虑 Web 组件，或者小部件可以是我们以某种方式嵌入的实际 Vue 应用程序吗？
如果小部件应创建为 Web 组件，那么使用 Vue/web-component-wrapper 或 vue-custom-element 库有什么区别吗？
无论我们选择哪个选项，我们都可以充分利用您在任何普通 Vue 应用程序中使用的功能 - Vue 路由器、用于状态管理的 Vuex 等（并且状态可以在这些小部件之间共享）吗？
小部件是否需要完全样式化，或者最佳实践是将组件的所有样式留给父应用程序（或两者的组合）？
我以前从未做过这样的事情（你可能会知道！），因此任何指导、建议或示例指示将不胜感激。
** 更新 **
我发现这篇文章是我需要走的方向https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
推荐指数
解决办法
查看次数
如何编写一个“延迟”的简洁组件？
我正在尝试编写一个 Svelte 组件，在指定的时间内隐藏其插槽。
例如，下一行应在 3 秒内隐藏该段落
<Delayed mili_time={3000}> <p>some text</p> <Delayed>
我的尝试不起作用，没有显示任何内容（尽管没有引发错误，但仍显示日志）我很乐意收到一些帮助、提示或指导。
尝试：
<script>
import { onMount} from "svelte";
export let mili_time = 500;
let shown = false;
onMount(
setTimeout(() => {
console.log("delayed!");
shown = true;
}, mili_time)
);
</script>
{#if shown}
<slot />
{/if}
<style></style>
预先感谢任何阅读或回答问题的人^^
推荐指数
解决办法
查看次数
Lit-element，如何连接TemplateResult？
我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件，以便在单击按钮时也显示带有面包屑的标题标题。
示例代码：
... private getTemplateResultFromProperty: TemplateResult[] = []; ...
//This works fine:
func1(): TemplateResult {
return html`
<custom-header-template
.data=${data}'>
</custom-header-template>`
}
//Can't return concatenated header
func2(): TemplateResult {
//repeat does not work, this returns empty strings
return html`${repeat(this.getTemplateResultFromProperty, t => t)}`;
}
我们只能在func2方法中通过指定数组元素而不使用 html`` 来返回并显示新标头，如下所示：return this.headerTemplateArray[1]但这不是我们想要做的。
错误消息：Uncaught (in promise) TypeError: Cannot read property 'split' of null at new Template (template.js:87)当我们尝试这样做时：return html`${this.getTemplateResultFromProperty}`;
在这种方法中， html`` 方法似乎对我们根本不起作用...所以我们怀疑我们使用Repeat() 的方式可能存在问题，或者我们以错误的方式连接/使用 TemplateResult 。
有任何想法吗？
推荐指数
解决办法
查看次数
当渲染根为 lightdom 时点亮的样式
所以我有以下内容styles：
static styles = [css, icons];
然后我将其设置renderRoot为 lightdom：
protected createRenderRoot(): Element | ShadowRoot {
return this;
}
这样，样式就不会应用，我必须手动添加：
render() {
return html`
<style>
${css.cssText}
${icons.cssText}
</style>
如果我删除createRenderRoot，样式就可以工作，而无需<style>在render函数中设置标签。
谁能告诉我我做错了什么？或者为什么会发生这种情况？
推荐指数
解决办法
查看次数
如何正确处理带有子元素的Javascript自定义元素（Web组件）？
我有一个Custom Element应该有很多 HTML 孩子的。我在课堂上初始化它时遇到了这个问题 constructor ' （结果一定没有孩子）。我明白原因并知道如何解决它。但我现在应该如何围绕它设计我的课程呢？请考虑这段代码：
class MyElement extends HTMLElement {
constructor() {
super();
}
// Due to the problem, these codes that should be in constructor are moved here
connectedCallback() {
// Should have check for first time connection as well but ommited here for brevity
this.innerHTML = `<a></a><div></div>`;
this.a = this.querySelector("a");
this.div = this.querySelector("div");
}
set myText(v) {
this.a.textContent = v;
}
set url(v) {
this.a.href = v;
}
}
customElements.define("my-el", MyElement);
const frag …推荐指数
解决办法
查看次数
在点亮元素中使用 Vaadin 徽章
我正在尝试在点亮元素中使用vaadin 徽章。
\n该文档提到“要在应用程序中使用这些类，请在 theme\xe2\x80\x99s theme.json 中启用它们”，但我没有这样的文件，所以这对我来说真的很困惑。大多数文档都集中在 Java 上，所以我猜这就是混乱的根源。到目前为止我只通过 NPM 安装了一些组件。
\n无论如何，我尝试创建一个frontend/themes/common-theme/theme.json文件，但到目前为止还没有成功。
这是我的元素目前的样子：
\nimport {LitElement, html} from \'lit\';\n\nimport \'@vaadin/vertical-layout\';\nimport \'@vaadin/horizontal-layout\';\n\nimport \'@vaadin/vaadin-lumo-styles/badge.js\';\n\nexport class PaymentLink extends LitElement {\n static properties = {\n version: {},\n link : { Object}\n };\n\n constructor() {\n super();\n }\n\n render() {\n return html`\n <vaadin-horizontal-layout>\n <a href="${this.link.url}">${this.link.id}</a>\n <span theme="badge">Pending</span>\n </vaadin-horizontal-layout>\n `;\n }\n\n}\ncustomElements.define(\'payment-link\', PaymentLink);\n有人可以给我看看光吗？这是一个 stackblitz 示例：https://stackblitz.com/edit/lit-element-jjzdpa ?file=src/index.js
\n推荐指数
解决办法
查看次数
为什么 Lit 不计算 Web 组件中的背景颜色？
我有一些非常基本的代码，如下所示
#component file
import { html, LitElement } from 'lit';
import sheet from './css/styles.js';
export class CaiWc extends LitElement {
static styles = [sheet];
render() {
return html`
<h2>Hello World</h2>
<div>ITEM 1</div>
<div>ITEM 2</div>
<div>ITEM 3</div>
`;
}
}
#styles.js
import { css } from 'lit';
export default css`
:root {
background-color: #0000cc;
color: #ff0000;
}
:host {
background-color: #ff0000;
color: #0000cc;
}
`;
我不明白为什么没有显示背景颜色。当我的标记对于第三方 Web 组件更加复杂时，该 Web 组件的背景颜色将从:host. 如果我正确阅读https://developer.mozilla.org/en-US/docs/Web/CSS/background-color，则不会继承背景颜色。但是，如果默认是透明的，为什么不填充呢？
推荐指数
解决办法
查看次数
与RESTful后端API服务进行反应入门工具包通信
https://github.com/kriasoft/react-starter-kit
我有一个后端API服务器正在运行,我正在寻找一个前端框架.然后我遇到了这个似乎是一个很好的候选人的反应初学者工具包.
我的理解是,我一次只处理一个反应组件.我可以将所有代码逻辑(如API调用,DOM元素更改等)放在componentDidMount()中,这样DOM和逻辑之间就会有交互.(我对吗？)
import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
import styles from './ContactPage.less'; // eslint-disable-line no-unused-vars
import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars
@withStyles(styles)
class ContactPage {
static contextTypes = {
onSetTitle: PropTypes.func.isRequired
};
render() {
let title = 'Contact Us';
this.context.onSetTitle(title);
return (
<div className="ContactPage">
<div className="ContactPage-container">
<h1>{title}</h1>
<p>...</p>
</div>
</div>
);
}
}
export default ContactPage;
这是我试图破解的反应组件的原始代码.我试图包含"请求"模块,以便我可以发出http请求.
var request = require('request'); // for backend API calls
componentDidMount() {
request('https://www.google.com')
}
它没用.那我在这里做错了什么？谢谢.
错误消息很长,从以下消息开始.
./~/request/lib/har.js中的错误找不到模块:错误:无法解析/ Users/ssmlee04/Desktop/react-starter-kit/node_modules/request/lib …
推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×6
lit ×4
svelte ×2
breadcrumbs ×1
css ×1
embed ×1
frontend ×1
html ×1
innerhtml ×1
lit-element ×1
lit-html ×1
reactjs ×1
vaadin ×1
vue.js ×1
vuex4 ×1