无法弄清楚为什么: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>