这里我用 Shadow dom 创建了元素。
/* some preparing code */
this.createShadowRoot(); // creates shadow root, this refers to element
稍后在代码中我将访问我创建的影子 dom。这些工作：
this.shadowRoot.getElementById("...")
this.shadowRoot.querySelector("...")
然而这并没有：
$("...", this.shadowRoot)
这是为什么？作为目前他的工作的临时解决方案：
$("...", this.shadowRoot.children)
有没有更好/更优雅的方法来使用 jQuery 处理影子根？
请注意，我使用的 jQuery 版本是 2.1.1，并且我只处理 Chrome。
编辑：this.shadowRoot.children在顶层查找节点时显然不起作用。
假设我创建并插入了一个这样的元素
<template id="react-web-component">
<span>template stuff</span
<script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
(function (window, document) {
const doc = (document._currentScript || document.currentScript).ownerDocument;
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function () {
const template = doc.querySelector('template#react-web-component').content;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.cloneNode(true));
},
},
});
document.registerElement('react-web-component', { prototype: proto });
})(window, document);
</script>
<react-web-component></react-web-component>
现在我想使用 aquerySelector来访问我的元素的开放阴影 dom。像这样：
document.querySelector('react-web-component::shadow')
但这不起作用。有没有其他办法？
编辑以回应@Supersharp 的回答
对不起，我没有说清楚。我使用的 webpack
style-loader只接受一个 CSS 选择器，它与 一起使用document.querySelector，所以我要的是一个我可以用这种方式使用的 CSS 选择器。
创建带有 shadow dom 的自定义元素并设置元素的 innerHTML 时，它不会显示。为什么？有没有办法防止这种情况发生？
//JS代码
export default class VideoPlayer extends DomElement {
constructor() {
super();
const mountPoint = document.createElement('div');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
}
}
window.customElements.define('video-player', VideoPlayer);
//HTML代码
<video-player>Why is this text hidden?</video-player>
javascript innerhtml web-component shadow-dom custom-element
以下代码是来自 chrome 开发工具的视图
<textarea>
#shadow-root (user-agent)
<p> This I want to restyle </p>
<textarea>
如果我想在 shadow DOM 中重新设置元素的样式，我必须使用什么 CSS 选择器？
谢谢你
我不明白为什么在对主机本身起作用时，像这样的伪类:focus-within需要在:host()函数括号内。为什么不能:host:focus-within div？更奇怪的是它在:host另一个:host().
class MyElementFail extends HTMLElement {
constructor(...args) {
super(...args)
this.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host{
display: block;
padding: 20px;
background-color: salmon;
}
:host div{
background-color: white;
}
/*This part is different:*/
:host:focus-within div{
background-color: green;
}
</style>
<input type="text" value="click in here"/>
<div>
Change to green
</div>`
}
}
window.customElements.define('my-element-fail', MyElementFail);
class MyElement extends HTMLElement {
constructor(...args) {
super(...args)
this.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host{
display: block;
padding: 20px; …我们知道我们可以将font-sizeon设置html为rem普通 DOM 节点的基础，我使用这个技巧使我的应用程序的字体更加灵活，可以通过 js 动态更改。
然而，当我创建一个 web 组件时，我发现rem里面的 shadow DOM 总是指 16px，即使我尝试*{ font-size:72px }在 shadow DOM 内部添加一个样式。16px 是常见的浏览器默认字体大小。
这是一个简单的演示：https : //jsfiddle.net/qmacwb6r/
<html>
<head>
<script>
var template =`
<style>
* {
font-size: 72px;
}
div {
font-size:2rem;
}
</style>
<div>
I am 2rem = 2*broser default
</div>
`
class TestTemplate extends HTMLElement {
constructor(){
super();
this.rt = this.attachShadow({mode:"open"});
this.rt.innerHTML = template;
}
}
customElements.define("test-component", TestTemplate);
</script>
</head>
<body>
<test-component></test-component>
</body> …我有
div id=outer
#shadowRoot
div id=inner
button
在按钮的点击处理程序中，我想引用 div“inner”。在非 shadowDom 世界中，这将是document.getElementById('inner')，但在 shadow DOM 世界中等价物是什么？
注意。这是从自定义元素内部访问。我不是想从外面刺穿 shadow DOM。
我有一个带有两个命名插槽的 stencilJS 组件。有没有办法确定插槽是否已分配值？例如，下面的代码片段显示了“ logo ”和“ menu ”的命名槽。如果两个命名槽都不为空，我如何检查组件内部？理想情况下，我想从组件内部和 componentWillMount() 期间进行检查。谢谢你。
<koi-menu breakpoint="768" userToggled="false">
<div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>
<ul class="nav__wrapper list mw8-ns center-m" slot="menu">
<li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
</ul>
</koi-menu>
我经常遇到不知道要为离子组件更改什么 css 的问题。例如，我有一个使用 ionic 勾勒轮廓的按钮，我最初的猜测是用类似的东西覆盖其轮廓/边框颜色。
border: 1.2px solid #697954;
但这没有用，所以我基本上只需要浏览论坛帖子，直到我发现它改变了
--border-color
这似乎是寻找如何覆盖离子组件 css 变量的一种非常低效的方法。
我在哪里可以找到 css ionic 用于其组件的确切内容，以便我可以轻松地覆盖它们而无需翻阅论坛帖子？我在 github 上检查了 ionic core.css，但这并没有给我我想要的信息。
众所周知，我的边框颜色已正确完成，但我需要更改 onclick 背景颜色和 onclick 文本颜色。我不想再通过论坛挖掘。
只有一些 HTMLElements 支持约束验证 api（例如，HTMLButtonElement）。我想创建一个自定义的 web 组件，它也支持约束验证 api。
下面给出了所需结果的示例：
<form>
<input name="title" required>
<custom-form-component></custom-form-component>
</form>
<script>
const form = document.querySelector('form');
form.checkValidity();
</script>
的custom-form-component可以调用setCustomValidity其自身上（基于相应用户输入上下文）和验证本身真或假。因此，form.checkValidity()对于 的结果，对 的调用应该返回真或假custom-form-component。
正如我从文档中发现的（例如在 MDN 上），仅对于某些元素，可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。
具体问题：如何实现支持约束验证api的自定义Web组件？
web-component shadow-dom native-web-component constraint-validation
shadow-dom ×10
javascript ×5
css ×4
html ×4
font-size ×1
innerhtml ×1
ionic4 ×1
jquery ×1
sass ×1
stenciljs ×1