html - 自定义元素:主机边框
问题描述
无法弄清楚为什么黑色边框:host
没有绕过包含红色 svg 边框的阴影根?
<!doctype html>
<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"/>
<meta name="mobile-web-app-capable" content="yes">
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
<script type="module">
import {html, render} from 'https://unpkg.com/lit-html'
class HelloWorld extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: 'open'});
}
connectedCallback() {
render(html`
<style>
:host {
width: 24px;
height: 24px;
border: 1px solid black;
}
svg {
border: 1px solid red;
}
</style>
<svg viewBox="0 0 24 24" width="24" heigth="24">
<g><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
</svg>
`, this.shadowRoot)
}
}
customElements.define('hello-world', HelloWorld)
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
解决方案
嗬!忘记添加display:block;
<!doctype html>
<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"/>
<meta name="mobile-web-app-capable" content="yes">
<style>
html, body {
padding: 0;
margin: 0;
}
</style>
<script type="module">
import {html, render} from 'https://unpkg.com/lit-html'
class HelloWorld extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: 'open'});
}
connectedCallback() {
render(html`
<style>
:host {
display: block;
width: 24px;
height: 24px;
border: 1px solid black;
}
svg {
border: 1px solid red;
}
</style>
<svg viewBox="0 0 24 24" width="24" heigth="24">
<g><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></g>
</svg>
`, this.shadowRoot)
}
}
customElements.define('hello-world', HelloWorld)
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
推荐阅读
- php - 我的表单应该在 wordpress 中有 wp_nonce_field() 吗?
- android - 如何通过checkbok发送自定义列表视图选定的项目ID
- elasticsearch - 用于分页聚合的 Elasticsearch From 和 Size
- ms-access - 按 ID 显示时间序列中的 MS Access 运行计数
- javascript - 在没有 Facebook 帐户的情况下使用 Facebook JavaScript 注册
- android - android模拟器的wifi显示“已连接没有互联网”
- node.js - 有人知道如何使用 NodeJs 将音频/图像发送到 Telegram 机器人吗?
- javascript - 发布 SNS 时 AWS Lambda 超时
- java - JPQL 查询使用 AttributeConverter 存储的列表中的项目
- c# - 在我的警报程序上需要帮助