Components and AMP layout rules

[dvoytenko]

Currently AMP elements are structured like this:

<amp-element>      <- AmpElement (custom element wrapper)
                     <- defines layout/size
  <container>      <- BaseElement (implementation)
                     <- adheres to the layout defined by AmpElement

Some of the most critical layout styles are:

• display: block|etc (but not "inline");
• proxies for width and height;
• position: relative|absolute|etc (but not "static");
• overflow: hidden.

React components follow AMP's BaseElement layer which means that they accept layout, but normally do not define their own static layout.

Besides layout, AmpElement is also responsible for showing placeholder and loading indicator. This is especially important since the placeholder and loading indicator are shown this way even before the BaseElement implementation script has been downloaded.

To still allow static layout in the React/AMP layer, we could provide AmpLayout component that could implement layout/placeholder/loading-indicator features via composition.