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

如何解决Vaadin + 聚合物组件无法正确渲染

首先，我对前端技术完全不满意。我正在尝试基于聚合物模板制作 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);

解决方法

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

您可以通过更改 CSS 以使用 :host 选择器来在某种程度上解决此问题，但我无法猜测这是否足以应对所有情况（尤其是媒体查询）。 :host 选择器应用于影子根附加到的元素，即 not-found-view 元素本身。

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