twitter bootstrap - Vaadin + Polymer Component Does Not Render Correctly

Question

To begin with, I'm not comfortable at all with front-end technologies. I'm trying to make a Vaadin view based on a polymer template. Problem is that the result is not what I'm expecting. When I preview the page without Vaadin and Polymer (Classic HTML + CSS), the result is this:

But when using Polymer I get this when I go that route with Vaadin:

I suspect I may be making some mistake in the way I import my CSS. Here is my Polymer code:

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

Polymer uses shadow roots which means that the CSS inside the element is encapsulated to only apply to the contents of that element. In particular, it means that the styles targeted to html and body are never applied since those elements are not inside this element.

You can to some degree fix this by changing the CSS to use the :host selector instead, but I cannot guess whether that would be enough for all the cases (especially the media queries). The :host selector applies to the element that the shadow root is attached to, i.e. the not-found-view element itself.

As an alternative, you could extract the global CSS to a separate file that is loaded as regular CSS rather than inside the element's shadow root.