子元素在阴影dom中的用法
是否存在阻止
给定以下示例：
<script>
class Table extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'}).innerHTML = `
<table>
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot name="row"></slot>
</tbody>
</table>
`;
}
}
window.customElements.define('data-table', Table);
</script>
<data-table>
<tr slot="header">
<th>header1</th>
</tr>
<tr slot="row">
<td>cell1</tr>
</tr>
</data-table>
解决方法是在事件处理程序中使用模板并使用JS插入模板内容，但是我想避免这种情况，因为克隆的内容最终会出现在阴影DOM中，并且不可能从外部覆盖样式自定义元素。
共有2个答案
匿名用户
将其他标签放在table上不正确，那么您应该使用css prop（显示：table-cell；，显示：table-row，显示：table-Heade-group；，显示：table-foter-group；）带有其他标签。
但如果仍要使用表，
您可以添加标签功能如下：
灯光操场
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('data-table')
export class dataTable extends LitElement {
static styles = css`
table {
border:1px solid;
}
`;
render() {
return html`
<table>
${this.templateGen()}
</table>
`;
}
templateGen() {
return html`<slot></slot>`;
}
}
<!DOCTYPE html>
<head>
<script type="module" src="./simple-greeting.js"></script>
</head>
<body>
<data-table><p>Test slot in table<p></data-table>
</body>
匿名用户
如注释中所述，根据自定义元素规范v1，这目前是不可能的。
规范限制的标签
-
shadowdom结构：在上面的shadowdom结构中，我们可以在chrome中使用selenium和javascript访问各个元素，如下所示： 在Firefox中：//div[@class='Style-Sconk-tabs'而不是（@隐藏）]//div/span[包含（text（），'AttrName'）]/.../前驱兄弟姐妹::div/puch-icon-按钮[1]/铁图标[1] 在C
-
量角器1.7.0引入了一个新特性：一个新的定位器，它有助于查找阴影DOM中的元素。 它涵盖哪些用例？您希望何时访问阴影DOM中的元素？ 我问这个问题的原因是我错过了这个问题的动机部分——我认为量角器主要是一个有助于模仿真实用户交互的高级框架。访问阴影树听起来像是一件非常深入的技术事情，你为什么要这么做让我困惑。
-
有没有可能用蟒蛇硒在阴影DOM中找到元素？ 示例用例： 我用输入了这个
-
我可以通过以下方式访问dev中的用户名： 有没有其他方法可以通过webdriver访问ShadowDOM元素？
-
基本上，我想访问一个出现在打印预览弹出窗口中的按钮，这是一个阴影dom元素。我尝试了一些我在stackoverflow周围找到的解决方案，但是它们不起作用，就像我试图构建的当前代码一样，它是： 检查元素打印
-
我需要使我的长方体阴影看起来像一个边框：如果我有一个具有插入的长方体阴影的父对象，并且我在其中放置了一个子div，则长方体阴影应该覆盖子div，如图所示，并带有边框： jsFiddle：http://jsfiddle.net/7rRsw/2/ 这个问题有没有类似于z索引或css黑客的东西？ 编辑：我需要使用框阴影插入无边框或框捕捉。我正在寻找黑客，使这只可能与盒影。一种可能的方法是在子div的左右