标签: web-component
我应该如何在角度自定义元素（Web 组件）中引用资产
我创建了一个 Web 组件，并从我的资产文件夹中引用了图像
如下
<img src="./assets/bot.png" alt="{{botTitle}}" />
在本地一切都很好，我将自定义元素发布到了 firebase 主机，并且 javascript、css 和资产文件夹已经存在于我的主机上。
然后我尝试在另一个 html peage 中使用我的 web 组件，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TMIBot</title>
<base href="/">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test Angular Elements</title>
<link rel="stylesheet" href="https://myproject.firebaseapp.com/dist/dlx-styles-1.0.css">
</head>
<body>
<dlx-chat></dlx-chat>
<script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>
并通过本地 http 服务器（http-server）提供服务
问题是正在加载的图像./assets/bot.png在托管网站中不存在，而它们存在于我在 firebase 中发布的网站上。
我知道我可以通过完整的 url 来引用它们，但我也认为有一个明显的解决方案，但我错过了。
我感谢帮助
推荐指数
解决办法
查看次数
如何确保 vuex 商店包含在我的构建中？
我有一个使用 vue cli 3 的 Vue 应用程序。我正在按照此处的指南尝试构建我的应用程序vue-cli-service build --target wc --name my-element [entry]
为了测试输出，我有一个 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="my-project.min.js"></script>
</body>
</html>但是在浏览器中打开 index.html 时出现以下错误：
它指向 my-project.min.js 的这一部分：
我的 main.js：
import "@babel/polyfill";
import Vue from "vue";
import MyProject from "./MyProject.vue";
import router from "./router";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: …推荐指数
解决办法
查看次数
Web 组件：如何使用 shadowRoot.querySelector 访问带槽元素
嗨，我是 Web 组件概念的新手。我想知道我们是否可以使用 shadowRoot.querySelector 访问带槽的元素
我已经实现了一个输入字段作为用于动态设置一些值的插槽。并为其添加一个类“列标题”。我正在尝试像这样在 connectedCallback() 中访问这个元素
var titleInput = this.shadowRoot.querySelector('.column-title')
但它返回空值。
请帮忙。
推荐指数
解决办法
查看次数
TinyMCE 4.9.x 仍然不能在 shadow dom 中工作。有什么想法如何解决吗？
我尝试将 tinyMCE 初始化为放置在 shadowDOM 中的元素。（聚合物网络组件），但它不起作用。
我在这里找到的情况相同的例子：https : //embed.plnkr.co/WXtcz2GUpOhgrhWBTcAW/
你有什么想法，如何为shadowDOM中的元素初始化tinyMCE 4.9.3？（在 FireFox 65.0.2、Chrome 72.0.3626.121 上测试）
推荐指数
解决办法
查看次数
如何将 js 对象和函数传递给 Web 组件
大家好，我是 javaScript 的初学者，目前正在探索 JS Web 组件，但由于某些用例而陷入困境
1）我想将一个 JS 对象传递到我的组件中，例如
<my-component data=obj ></my-component>
并要求在我的组件代码中使用
connectedCallback () {
console.log(this.data) // it should print {"name":"xyz" , "role" : "dev"}
}
2）我还需要传递一些函数或者回调函数，比如。
function myFunction(e){
console.log(e)
}
<my-component click=myFunction ></my-component>
请尝试在 ans 中添加代码片段，这将有助于我学习更多 JS。谢谢
推荐指数
解决办法
查看次数
在反应式场景中什么应该更好：Reactor Kafka 或 Kafka Listener
我有一个挑战我的场景：Kafka 主题，我必须使用这些消息并通过 SSE 公开给 Web 组件。我已经在所有层中进行了几次尝试，以寻找一种稳定且更可靠的方法，或者至少有一些我可以更舒适地支持。
现在我创建了一个非常简单的 Kafka 主题并创建了两个不同的使用者，两者的工作方式似乎非常相似。一种是使用 org.springframework.kafka.annotation.KafkaListener 和其他 reactor.kafka.receiver.KafkaReceiver。
最终目标是通过 Spring WebFlux 公开一个事件，当消费者来自主题时发布消息。
如果我没记错的话，我在某处读到 Spring..KafkaListener 正在阻止代码，但据我所知，它不是。它只是一个与 Reactor..KafkaReceiver 完全相同的监听器。因为我正在编写一个非阻塞代码，所以我应该避免阻塞代码，但我不能在任何地方使用 Spring..KafkaListener 阻塞。
以下是产生完全相同结果的基本比较：
反应堆KafkaReceiver：
ReceiverOptions<Object, Object> consumerOptions = ReceiverOptions.create(consumerProps)
.subscription(Collections.singleton("test"))
.addAssignListener(partitions -> logger.debug("onPartitionsAssigned {}", partitions))
.addRevokeListener(partitions -> logger.debug("onPartitionsRevoked {}", partitions));
kafkaReceiver = KafkaReceiver.create(consumerOptions);
((Flux<ReceiverRecord>) kafkaReceiver.receive()).doOnNext(r -> {
logger.info(String.format("Consumed Message using KafkaListener -> %s", r.value()));
r.receiverOffset().acknowledge();
}).subscribe();
春季卡夫卡听众：
@KafkaListener(topics = "test")
public void consume(String message) {
logger.info(String.format("Consumed Message using KafkaListener -> %s", message));
}
如果要重现比较：
1 - clone https://github.com/jimisdrpc/simplest-comparison-kafkaconsumer
2 …web-component server-sent-events apache-kafka project-reactor spring-webflux
推荐指数
解决办法
查看次数
Material Web Components 与 Material Components Web
Material Web Components（链接）和Material Components Web（链接）之间有什么区别吗？
Material Web Components 除了
构建在Material Components Web项目和 LitElement 之上，Material Web Components 支持可靠的开发工作流程，以构建美观且功能强大的 Web 项目。
而材料组件 Web 是
网页材料组件 (MDC Web) 可帮助开发人员执行材料设计。这些组件由 Google 的核心工程师和 UX 设计师团队开发，可实现可靠的开发工作流程，以构建美观且实用的 Web 项目。
它只是在 LitElement 中使用 Web 组件重新实现所有 MDC 组件吗？
目前关于 Material Web Components 的文档非常稀少，因此很难比较它们在测试应用程序中的使用情况。
顺便说一句，这个命名很糟糕，希望他们在预发布期间更改名称。
javascript web-component material-design custom-element material-components-web
推荐指数
解决办法
查看次数
Lit-elements，编写受控组件的惯用方式
我正在通过@open-wc使用lit-elements，目前正在尝试编写一组嵌套的组件，其中内部组件是一个输入字段，并且某些祖先组件必须支持一些任意重写规则，例如“不允许输入数字” '。
我想弄清楚的是使用 lit-elements 构建它的正确方法是什么。在React 中，我会使用一个“受控组件”，在这里可以轻松地强制所有组件提交给根组件属性。
下面的示例是我使用 Lit-Elements 提出的。有没有更好的方法来做到这一点？
请注意; 因为我想忽略一些字符，所以挑战变得稍微困难一些。如果没有e.target.value = this.value;at 级别 5，输入 elmement 将与忽略字符上的组件状态不同。我希望整个组件链正确同步，因此以标头标签为例。
export class Level1 extends LitElement {
static get properties() {
return {
value: { type: String }
};
}
render() {
return html`
<div>
<h1>${this.value}</h1>
<level-2 value=${this.value} @input-changed=${this.onInput}></level-2>
</div>`;
}
onInput(e) {
this.value = e.detail.value.replace(/\d/g, '');
}
}
... …推荐指数
解决办法
查看次数
Web 组件 - 字体和材质图标不起作用 (@font-face)
我正在尝试通过运行以下命令使用 vue cli 3 创建一个 Web 组件
vue-cli-service build --target wc --name wc-demo 'src/App.vue'
我在 Web 组件中加载字体和材质图标时遇到问题。
我进口的Roboto-font.scss和材料icon.scss的风格标签内App.vue这是用于创建Web组件条目。
<style lang='scss'>
// @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import "~@/assets/fonts/roboto-font/roboto-font.scss";
@import "~@/assets/fonts/material-icons/material-icons.scss";
</style>
Material-icon.scss
$font-dir: "assets/fonts/material-icons/web-font/";
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
// src: url('https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format("woff2");
src: url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2") format("woff2"),
url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff") format("woff");
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
} …推荐指数
解决办法
查看次数
用于自定义 Web 组件的 Visual Studio Intellisense
我有一些 Web 组件自定义元素，在这种情况下是用 StencilJS 构建的。它们通过 npm 包安装到我的解决方案中，然后通过脚本标签全局包含在布局中。
如何让 Visual Studio 了解这些元素并在 .cshtml 视图中为自定义元素及其属性提供智能感知？
StencilJS 输出一个 TypeScript *.d.ts 文件，其中包含这些元素的定义，以及描述这些元素的其他 JSON 文件。Visual Studio 可以使用其中任何一个吗？
似乎可以通过在html.customData设置中添加引用来配置 Visual Studio Code 以使用此 JSON ，Visual Studio 是否有等效的东西？
推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×6
angular ×1
apache-kafka ×1
font-face ×1
fonts ×1
lit-element ×1
polymer-1.0 ×1
shadow-dom ×1
stenciljs ×1
tinymce ×1
vue-cli-3 ×1
vue.js ×1
vuex ×1