Question

不能弄清楚为什么: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>

Answer 1

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

自定义元素：主机边框

1 个答案: