我正在尝试在 React 应用程序中使用一些 Web 组件。但是，React 无法检测 Web 组件标签。
import React from "react";
import "./App.css";
import "@vaadin/vaadin-button";
import "@vaadin/vaadin-text-field";
function App() {
return (
<div className="App">
<vaadin-text-field label="First Name" ref="firstName" />
<vaadin-text-field label="Last Name" ref="lastName" />
<vaadin-button ref="addButton"> Add </vaadin-button>
</div>
);
}
export default App;
我收到类似的错误
类型“JSX.IntrinsicElements”上不存在属性“vaadin-text-field”。
我是否需要使用Reactify-WC才能在 React 中使用 WebComponents？
我正在尝试使用 lit Element 设计 Web 组件，并且我需要有关事件的帮助。正如我们从附加的代码片段中看到的，我们可以@change="${this.handleEvent}"在 html 模板中使用并处理该函数handleEvent(e){}并处理lit Element 组件内的通过这种方式，事件仅在点亮的 Web 组件中受到限制和控制。
然而，当其他人使用我们的 Web 组件时，他们对定义组件中这些事件的值没有太多控制或访问权限。例如，如果我们有一个 index.html 文件并且我像这样使用它<my-element onchange="handleEvent(e)"></my-element>，我应该有权访问 onchange 事件并仅调用索引文件内的函数。
那么，有没有一种方法可以实现与常规 html 事件类似的行为，而不是编写仅限于 lit Element Web 组件的事件。
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';
class MyElement extends LitElement {
static get properties() {
return {
checked: { type: Boolean, attribute: true }
};
}
static get styles() {
return [
css`
div {
padding: 10px;
width: 90px;
border: 2px …我正在制作一个 Web 组件，它将显示“Hello {name}!” 从哪里来。{name} name="foo"当我尝试它时，我没有收到任何错误，但它只显示“Hello null！”。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./script.js"></script>
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
脚本.js：
class HelloWorld extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const p = document.createElement('p');
p.innerHTML = `Hello ${this.getAttribute('name')}!`;
this.shadowRoot.append(p);
}
}
customElements.define('hello-world', HelloWorld);
在任何情况下，我们假设name总是有一个输入。
html javascript web-component custom-element native-web-component
class Form extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
console.log(this)
console.log(this.innerHTML)
}
}
customElements.define("my-form", Form);
我现在正在尝试访问innerHTML，因为console.log(this)如果我在控制台中展开它，innerHTML 已设置，但当我尝试时console.log(this.innerHTML)它不会记录任何内容。
为什么即使在connectedCallback中我也无法访问我的标签内的任何内容。
最终我想做的是
class Form extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
let inputCounter = 0
for (let i of this.querySelectorAll("input")) {
this[inputCounter] = i
inputCounter++
}
}
}
customElements.define("my-form", Form);
但我不能这样做，因为我无法访问元素内的任何内容。
Google 的<model-viewer>提供了我需要的所有关键功能，而无需通过类似react-three-fiber或直接在 Three.js 中编写自定义解决方案。
我正在努力解决如何将其正确集成到 Reagent（以及 React）结构中。
为了使其易于与 vanilla JS 一起使用，它被构建为一个 Web 组件，并且主要通过其 html 元素上的属性进行控制。通常这不会是什么大问题，但由于 3D 和加载大型模型重新渲染的开销，这是昂贵的，并且在许多情况下会破坏功能。
我试图天真地在组件内使用它，并试图消除重新渲染的可能性。使用 ref 直接改变它。
我还尝试将其设置为从 Reagent/React 控制的应用程序手动创建的 html 元素，并通过其 dom 元素在各种事件中引用它。
这两个选项都引入了很多技巧，并且在单页应用程序中并不理想。
我想知道是否有人有关于如何最好地将其包装在 React/Reagent shell 中的任何提示，同时仍然可以访问核心元素以使用其底层 JS api。
答案不必在ClojureScript中。
以下是其页面上的用法示例：
<model-viewer
alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum"
src="shared-assets/models/NeilArmstrong.glb"
ar ar-modes="webxr scene-viewer quick-look" environment-image="shared-assets/environments/moon_1k.hdr"
poster="shared-assets/models/NeilArmstrong.webp"
seamless-poster
shadow-intensity="1"
camera-controls>
</model-viewer>
感谢您的任何提示。
关于Clojurians Slack 的其他讨论（链接需要访问 Slack）
关于Clojureverse的附加讨论
我正在尝试构建一个Angular 2组件,它显示带有无线电的选项列表.它工作正常,但是当选择其中一个选项时,answer组件的字段(内部绑定[(ng-model)]="answer")将不会更新.我做错了什么,或者这不是创建无线电选择列表的方法吗？
<div>
Answer: {{ answer }}
</div>
<div class="radio" *ng-for="#option of itemData">
<label>
<input type="radio" [value]="option.id" [(ng-model)]="answer"
(change)="responseChanged()" name="radio-list">
<span>{{ option.name }}</span>
</label>
</div>
得到了带faded属性的简单组件.
<template>
<style>
:host {
display: block;
height: 7em;
background: white;
border: 1px solid var(--paper-blue-grey-50);
width: 100%;
margin: 0.1em 0;
}
:host ([faded]) {
display: none;
background: #eaeaea;
color: #a8a8a8;
cursor: auto;
pointer-events: none;
}
.month {
...
}
.names {
...
}
.date {
...
}
</style>
<div>
<div class="month" hidden="[[hideMonth]]">[[details.month]]</div>
<div class="names">
<span class="date">[[details.date]]</span>
<div hidden="[[hideName]]">
<div>[[details.name]]</div>
<div class="highlight annotation"></div>
</div>
</div>
</div>
</template>
<script>
'use strict';
Polymer({
is: "calendar-day-short-view",
properties: {
date: {
type: Object, …我是这个框架的新手,很想看到一些有用而简单的通知和反映属性属性的例子.请保持示例简单或为您提供的任何代码添加说明.
我正在玩自定义元素.我很难找到缺乏支持的polyfill浏览器的正确方式(或者感觉正确的方式)(看似只有Firefox？).
我目前正在做以下事情:
if ('customElements' in window) {
var e = document.createElement('script');
e.src = '/static/elements/my-element.js';
document.body.appendChild(e);
} else {
var e = document.createElement('script');
// customElements
e.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.8/webcomponents-sd-ce.js';
e.onload = function() {
var c = document.createElement('script');
// ShadyCSS
c.src = '/static/js/custom-style-interface.min.js';
c.onload = function() {
var i = document.createElement('script');
i.src = '/static/elements/my-element.js';
document.body.appendChild(i);
}
document.body.appendChild(c);
}
document.body.appendChild(e);
}
这可行,但显然效率极低(特别是在慢/高延迟网络上),而且看起来非常嘈杂.在尝试支持Firefox之前,我可以做到:
<script src="/static/elements/my-element.js"></script>
现在我上面有这种憎恶.必须有一个更好的方法,但我似乎找不到一个.
如何确保customElement和ShadyCSS polyfill之前运行my-element.js而不会延迟下载量？任何指针都非常感谢!
编辑: 现在我正在使用另一种方法,我将在这里添加.我不认为它是完美的,但似乎比我的第一种方法更好或强迫每个人下载polyfills无论他们是否需要它们.
function insertScript(url, downloadAsync) {
const script = document.createElement('script');
document.head.appendChild(script);
script.async = downloadAsync;
script.src …javascript web-component polyfills shadow-dom custom-element
我想创建应该在ie11上运行的Web组件。我正在用gulp（和gulp-babel，其中包括babel 7）编译js。
到目前为止，当我使用Babel进行编译时，它可以在Chrome中运行，但是会在ie11：中发送错误Function.prototype.toString: 'this' is not a Function object。
在gulpfile.js中，我有这个：
.pipe(babel({
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
}
}]
]
}))
在js中，我有类似这样的内容（我在网上找到了用于测试的示例代码）：
class MyCustomTag extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h2>My custom element</h2><button>click me</button>';
this.style.backgroundColor = 'blue';
this.style.padding = '20 px';
this.style.display = 'inline-block';
this.style.color = 'white';
}
}
try {
customElements.define('my-custom-tag', MyCustomTag)
} catch (err) {
const h3 …web-component ×10
javascript ×6
html ×3
polymer ×3
reactjs ×2
vaadin ×2
angular ×1
babel ×1
css ×1
gulp ×1
gulp-babel ×1
lit ×1
lit-element ×1
polyfills ×1
re-frame ×1
reagent ×1
shadow-dom ×1
typescript ×1