个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试创建一个附加了 shadow dom 的自定义组件。自定义组件被创建并添加到附加了影子 dom 的 dom 但 :host 样式没有被应用
HTML
<html>
<head></head>
<body>
<notify-user>
<h3 slot='title'>New message in #customer-support</h3>
<p>This is shadow dom in action</p>
<button>Reply</button>
</notify-user>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
JS
class Notification extends HTMLElement{
constructor(){
super();
}
connectedCallback(){
console.log('notification custom element attached to DOM');
console.log('this',this);
let nRoot = this.attachShadow({mode : 'open'});
nRoot.innerHTML = `
<style>
:host{
background-color : #3498db;
border-radius : 5px;
line-height: 1.4;
width: 25rem;
}
button {
min-width : 5rem;
padding: 0.5rem 2rem;
margin: 0.2rem;
background-color: transparent;
border-radius: 2px;
border: none;
color : white;
}
p{
color : white;
}
</style>
<div class="wrapper">
<button><span>X<span></button>
<slot name='title'></slot>
<slot></slot>
<p>1 minute ago</p>
</div>`;
}
}
customElements.define('notify-user',Notification);
当我运行时，这是为 :host 定义的浏览器样式未应用。
有人可以帮忙吗？
最佳答案
这里应用了:host 选择器。问题是，您的宿主元素没有可显示的可见内容。
解决此问题的一个简单方法是将 CSS 显示设置设置为“阻止”，以使元素可见:
:host {
background-color: #3498db;
border-radius: 5px;
line-height: 1.4;
width: 25rem;
display: block;
}
关于javascript - :host selector not working for custom element having shadow dom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50999753/
24
4
0
Windows“主机”文件编码是什么？是UTF-8吗？还是 ASCII + 系统代码页？应如何添加 IDN(带有变音符号等的国际域名)条目以及它们是否可以添加？ 最佳答案 它应该是没有 BOM 的 A
我已经在谷歌上搜索了大约 90 分钟，但仍然没有答案。在哪里设置 default_url_options？我已经将其设置为 config.action_mailer.default_url_optio
我正在从它的样式文件中设计一个 Angular 组件，我发现我必须使用 :host ,:host() 或 :host-context selector ，它们各自有什么不同？ 最佳答案 :主机 是用于
我正在创建简单的网络应用程序。而且我在服务器配置方面遇到了问题。当我尝试启动服务器时，收到错误消息 The element type "Host"must be terminated by the m
这个有效: 127.0.0.1 www.somesite.com 但不是这个: 127.0.0.1/somepath/www www.mysite.com 我做错了什么？是否可
我必须查看我的前同事留下的一些脚本，我很好奇为什么他在参数中使用 $a = $(Read-Host -Prompt "Write Something")节而不是 $a = (Read-Host -Pr
我在远程连接到 MySQL 服务器时遇到问题。我知道我的用户设置了来自任何主机的“%”通配符，因此我应该有权访问服务器。我可以使用我的凭据本地登录 MySQL 服务器，但不能远程登录。 我在 my.c
我正在尝试使用 angular 2 构建一个双主题应用程序。有问题的组件 css 已经使用 :host/deep/强制对子组件进行样式设置。 但是我正在尝试根据 html 主题切换此样式，并且我正在使
我需要将特定的传出连接(从我系统上的任何 网络客户端)重定向到特定的 IP。是的，可以通过在 /etc/hosts 文件中添加这一行来完成: 123.456.789.012 www.mydomain
尝试在开发中预览我的邮件程序，但出现上述错误。(使用 Michael Hartl 教程)。 我相信它因为我的主机而无法正常工作。但是，使用 cloud 9 我很难找到我的主机。在书中，它被定义为 Cl
nc 当我在虚拟机上执行它时工作正常。 Connection to 10.0.0.10 22 port [tcp/ssh] succeeded! 但是当我在 docker 容器内执行相同的命令时，它会
我正在学习PowerShell，想知道两者之间的区别 Read-Host -Prompt "Text" 和 Read-Host "Text" 是同一件事还是我没有看到的区别？ 最佳答案 这是同一件事。
我无法对 Cassandra 节点进行查询。我能够连接到集群并进行连接。然而，在执行查询时，它失败了 Caused by: com.datastax.driver.core.exceptions.No
我有这样的场景，比如我需要运行一个位于 12.34.567 的 API curl 请求，登录后我必须再登录一台主机 98.76.543。 登录到第二个主机后，我必须运行curl -XPOST -H"C
当我尝试 git push -u origin master到我的存储库，我得到 400 Bad Request .我特意用 编辑了一些信息。 最近从 gitlab-ee 中解绑了 nginx，并验
假设我有某个程序的源代码，源代码使用 GNU autotools，为了简单起见，假设该程序绝不是任何类型的开发工具。如果我手边有交叉工具链，我可以使用 --host configure 为平台 foo
在我的 ASP.NET Core 2.0 项目中，我一直在使用 Microsoft.Extensions.Hosting 命名空间中的 IHostingEnvironment 和 IApplicati
我正在使用以 Python3.6 为基础的 docker 镜像。突然间它开始崩溃(启动后立即退出)。所以我冲进了容器，发现它崩溃是因为与容器化 postgres 数据库的连接突然失败。我设法得到的唯一
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a software
我尝试使用 ssh命令连接到另一个远程主机。 ssh -p 21098 -i $OPENSHIFT_DATA_DIR/.ssh/host_key user@domain.com The authe
我是一名优秀的程序员,十分优秀！