In external browser body should have some CSS

[manolo]

In Designer, the white paper container represents the viewport of a real browser, but opening the same stuff in external browser it behaves different, like is shown in the screenshots:

Code

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">

<dom-module id="my-element">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        background: yellow;
        height: 100%;
      }
    </style>

    <div>
      Hello world
    </div>
  </template>

  <script>
    class OrderCard extends Polymer.Element {
      static get is() {
        return 'my-element';
      }
    }

    window.customElements.define(OrderCard.is, OrderCard);
  </script>
</dom-module>

Designer

Browser

The solution should be either:

• Set browser body CSS with height: 100vh; margin: 0 or any other variant like position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0;
• Allow the user to customise container behaviour, like size, flex, etc. and set those values to the external browser body.

[ripla]

We could just apply some reset styles in external preview, since all browsers seem to have 8px margin from user agent stylesheets.