自定义元素：主机边框答案

【问题标题】：custom element :host border自定义元素：主机边框
【发布时间】：2019-04-14 18:06:05
【问题描述】：

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

【问题讨论】：

标签： html custom-element

【解决方案1】：

哇！忘记加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>

【讨论】：