amp-script: Support custom styles

marcmrf commented 4 years ago

Describe the new feature or change to an existing feature you'd like to see

As amp docs says, amp-script opens the door to create custom ui components using frameworks like react or vuejs. Most of the styling options for these frameworks cannot work with amp-scripts, as they create style tags in the head like styled-components, which is not implemented in worker-dom https://github.com/ampproject/worker-dom/blob/master/web_compat_table.md, or inlining the styles in the elements, which is not amp-valid. Can document.head be implemented in worker dom, proxying the styles are attached to it for being transfered to the original document.head?

Describe alternatives you've considered

Discard amp-script and use amp-iframe instead for rendering widgets. This option has been discarded because of SEO purposes. The normal version is server side rendering the widgets, so using iframes in amp version will make the content to be different from the view of the crawler.
Extract the css from the js bundle and dump it in <style amp-custom>. This means to define the css outside the react component, like a normal css file, or using a normal css import in js with css-loader and MiniCssExtractPlugin, adding the whole css of the component, no matter if it's used or not at the initial state. This forces to maintain two different styling architectures, one of them far from the current state of the art for styling in react, depending if it's amp or not and goes against purely standalone components.

sparhami commented 4 years ago

Would it be possible to place the style tags in the root element of the script? You should be able to place style tags anywhere in the DOM and have them work. I don't think simply placing stuff in <head> will always work (e.g. for Shadow DOM) so I think having a way of specifying where to put the style tags would make sense outside of the <amp-script> use case.

sparhami commented 4 years ago

/cc @kristoferbaxter

dreamofabear commented 4 years ago

inlining the styles in the elements, which is not amp-valid

Inline styles via style attribute are valid as of sometime last year. :)

Unfortunately, dynamically rendering <style> tags won't be allowed without style encapsulation e.g. via shadow DOM.

thekp commented 4 years ago

Hi, I am also trying to use to render a react component that is styled with styled-compoents and is fetching data from an JSON endpoint. My goal for is to be able to render my react components on amp pages without having to re-rewrite the entire component. Support for custom styles will be very handy in acheiving my goal.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml

amp-script: Support custom styles #25345

Describe the new feature or change to an existing feature you'd like to see

Describe alternatives you've considered