我一直无法找到自定义标签在HTML5中是否有效的明确答案,如下所示:
<greeting>Hello!</greeting>
我没有在规范中找到任何方式:
http://dev.w3.org/html5/spec/single-page.html
并且自定义标签似乎不会使用W3C验证器进行验证.
我正在尝试检测是否已注册具有特定名称的自定义元素.有办法进行这样的检查吗？
或者有没有办法获得已注册的自定义元素列表？
我知道document.registerElement,但还有什么？它是单向API吗？
我正在使用Web组件polyfill为API开发一堆自定义元素,我遇到了麻烦.
其中一个元素可能包含一个<img>或一个<canvas>元素.如果没有为自定义元素指定维度,则它应该是子元素的默认大小.如果指定了一个或多个维度,则它们应由子元素继承.
对于我的第一次努力,我认为CSS inherit值足够好:
my-el img, my-el canvas {
width: inherit;
height: inherit;
max-width: inherit;
min-width: inherit;
max-height: inherit;
min-height: inherit;
}
但是,当百分比应用于宽度或高度时,这不起作用<my-el>.相反,子元素占用其父元素的相同百分比.
我已经尝试了各种其他尝试解决方案,并且搜索得无处可寻.我认为一个纯粹的CSS解决方案可能是不可能的,但我希望有人可以证明不是这样.
为了澄清,最终结果应该是<my-el>行为类似于内联替换元素本身,就像它<img>具有自己的内部维度一样.如果未在这些元素上设置宽度或高度,则默认为其内部尺寸.设置宽度或高度时,优先级和任何"内部"内容都会相应调整大小. (至少,我希望澄清!)
我实际上正在迁移到 Angular 15，并看到swiper 9 已经退出了。
它被写为一个简单npm i swiper且应该有效的方法，因为
所有主要浏览器和几乎所有框架都支持自定义元素。
但我有点迷失了，因为我无法再将其导入模块中
有人知道如何将最新的v9.0.0^swiper 版本与 Angular 一起使用吗？
我有一个特殊情况,我需要使用Web组件封装React组件.设置似乎很直接.这是React代码:
// React Component
class Box extends React.Component {
handleClick() {
alert("Click Works");
}
render() {
return (
<div
style={{background:'red', margin: 10, width: 200, cursor: 'pointer'}}
onClick={e => this.handleClick(e)}>
{this.props.label} <br /> CLICK ME
</div>
);
}
};
// Render React directly
ReactDOM.render(
<Box label="React Direct" />,
document.getElementById('mountReact')
);
HTML:
<div id="mountReact"></div>
这样安装正常,点击事件有效.现在,当我在React Component周围创建一个Web Component包装器时,它正确呈现,但click事件不起作用.这是我的Web组件包装器:
// Web Component Wrapper
class BoxWebComponentWrapper extends HTMLElement {
createdCallback() {
this.el = this.createShadowRoot();
this.mountEl = document.createElement('div');
this.el.appendChild(this.mountEl);
document.onreadystatechange = () => {
if (document.readyState …我有一个自定义元素定义如下:
class SquareLetter extends HTMLElement {
constructor() {
super();
this.className = getRandomColor();
}
}
customElements.define("square-letter", SquareLetter);
当JavaScript文件包含在HTML <head>标记中时,Chrome控制台会报告此错误:
未捕获的DOMException:无法构造"CustomElement":结果必须没有属性
但是当JavaScript文件包含在</body>结束标记之前时,一切正常.什么原因？
<head>
<script src="js/SquareLetter.js"></script> <!-- here -->
</head>
<body>
<square-letter>A</square-letter>
<script src="js/SquareLetter.js"></script> <!-- or here -->
</body>
对于Web组件,人们想要创建和覆盖的元素之一是<input>.输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的.
两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素.现在规范已经完成,看起来我对输入元素的需求没有得到解决.Shadow DOM应该允许我改变它们的内部结构和外观但是输入元素被列入黑名单并且不能有阴影根,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,带有is属性的自定义内置元素应该可以解决问题; 我无法做影子DOM魔法,但至少我有这个,对吧？好吧Safari不会实现它,聚合物不会因为这个原因而使用它们,它们的气味就像很快就会被弃用的标准.
所以我留下了正常的自定义元素; 他们可以使用shadow DOM并拥有我想要的任何逻辑,但我希望它们是输入!他们应该在一个内部工作<form>,但如果我是正确的,表单元素不喜欢它们.我是否必须编写自己的自定义表单元素,以复制本机的所有内容？我必须告别FormData,验证API等吗？我是否失去了使用没有javascript工作的输入表单的能力？
Web组件是热门的新事物,也是一个真正的Web标准,每个人都在谈论它们并且可能使用它们,它们似乎是我们遇到的问题的完美解决方案(在不同的站点之间共享组件).
所以我们构建了几个Web组件.Chrome中的工作正常,但IE11中没有.使用polyfill可能吗？https://www.webcomponents.org/polyfills有大量的polyfills,但IE11一直在抱怨class.
也许编译成ES5？各种来源声称Web组件需要ES6,因为您在IE11中没有从HTMLElement获得相同类型的继承.有自定义元素-es5-adapter.js,但不知何故它不起作用.如果我编译下来,webcomponents不起作用.如果我不这样做,IE11就会失败class.
但是每个人都在使用网络组件.你怎么做呢？你根本不支持IE11/Edge吗？难道我做错了什么？
CSS::slotted选择器选择<slot>元素的子元素。
但是，当尝试选择像 with ::slotted(*), ::slotted(*) *, or那样的孙子时，选择::slotted(* *)器似乎没有生效。
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.innerHTML = `
<style>
::slotted(*) {
display: block;
border: solid blue 1px;
padding: 3px;
}
::slotted(*) span {
display: block;
border: solid red 1px;
padding: 3px;
}
::slotted(* span) {
display: block;
border: solid green 1px;
padding: 3px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-element', MyElement);<my-element>
<p>
<span>Test</span>
</p>
</my-element> …我现在通过polyfill使用自定义元素v1一段时间了.Chrome 54(具有本机v1实现的第一个版本)在初始化元素时开始抛出错误:
DOMException:无法在'Document'上执行'createElement':结果必须没有子节点
违规行很简单:
let el = document.createElement('my-custom-element');
custom-element ×10
javascript ×4
css ×2
html5 ×2
shadow-dom ×2
angular ×1
forms ×1
html ×1
polyfills ×1
reactjs ×1
swiper.js ×1
w3c ×1