Components and AMP layout rules

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.

Examiner la structure existante des composants React/AMP et les responsabilités de BaseElement/AmpElement décrites dans l’issue. Déterminer si une couche de composition AmpLayout peut fournir une mise en page statique, des placeholders et des indicateurs de chargement tout en respectant les règles de mise en page AMP. La tâche est terminée lorsqu’une conception des composants et un périmètre d’implémentation sont convenus.