Vaadin聚合物组件无法正确渲染

Question

首先，我对前端技术一点也不满意。我正在尝试基于聚合物模板制作Vaadin视图。问题是结果不是我所期望的。当我预览没有Vaadin和Polymer（经典HTML CSS）的页面时，结果是这样的：

但当我使用Polymer时，当我使用Vaadin时，我会发现：

我怀疑我可能在导入CSS的方式上犯了一些错误。这是我的聚合物代码:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class NotFoundView extends PolymerElement {

    static get template() {
        return html`
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
            <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
            <style>
                @import url("https://fonts.googleapis.com/css?family=Nunito+Sans");
                :root {
                    --blue: #0e0620;
                    --white: #fff;
                    --green: #2ccf6d;
                }

                html,
                body {
                    height: 100%;
                }

                body {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: "Nunito Sans";
                    color: var(--blue);
                    font-size: 1em;
                }

                button {
                    font-family: "Nunito Sans";
                }

                h1 {
                    font-size: 7.5em;
                    margin: 15px 0px;
                    font-weight: bold;
                }

                h2 {
                    font-weight: bold;
                }


                .btn {
                    z-index: 1;
                    overflow: hidden;
                    position: relative;
                    padding: 8px 50px;
                    border-radius: 30px;
                    cursor: pointer;
                    font-size: 1em;
                    letter-spacing: 2px;
                    transition: 0.2s ease;
                    font-weight: bold;
                    margin: 5px 0px;
                }


                @media screen and (max-width: 768px) {
                    body {
                        display: block;
                    }

                    margin-bottom: 70px;
                    .container {
                        margin-top: 70px;
                    }
                }
            </style>
            <div class="container">
                <div class="row">
                    <div class="col-md-6 align-self-center">
                        <img src="/images/ancient.jpg" style="max-width: 80%; max-height: 80%; "alt="Ancient" />
                    </div>
                    <div class="col-md-6 align-self-center">
                        <h1>404</h1>
                        <h2>UH OH! You're lost.</h2>
                        <p>The page you are looking for does not exist.
                            How you got here is a mystery. But you can click the button below
                            to go back to the homepage.
                        </p>
                        <button type="button" class="btn btn-primary">HOME</button>
                    </div>
                </div>
            </div>
`;
    }

    static get is() {
        return 'not-found-view';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(NotFoundView.is, NotFoundView);

Answer 1

聚合物使用阴影根，这意味着元素内的CSS被封装为仅适用于该元素的内容。特别是，这意味着永远不会应用针对 html 和 body 的样式，因为这些元素不在此元素中。

您可以通过将 CSS 更改为使用 ：host 选择器来在一定程度上解决此问题，但我无法猜测这是否足以满足所有情况（尤其是媒体查询）。：host 选择器适用于影子根附加到的元素，即未找到视图元素本身。

作为替代方法，您可以将全局 CSS 提取到作为常规 CSS 加载的单独文件中，而不是在元素的影子根目录中加载。