Can't extract mjml, body, head (and its components) into a custom component

[mabouguerra]

Hello!

I have followed this https://github.com/mjmlio/mjml-component-boilerplate, and created many components alright, but when I tried to create a component that would abstract the head and body tags like this:

<mjml>
  <mj-head>
    <mj-font name="custom font" .../>
    <mj-attributes>
       <!--custom attribute values -->
    </mj-attributes>
  </mj-head>
  <mj-body width="custom width" ...>
        <!-- email content -->
  </mj-body>
</mjml>

But the .mjml templates wouldn't compile, complaining about the structure and missing mjml and body tags.

So I tried to only extract the head into a component, and although the templates compile but it has no effect: no font and no attribute values are applied.

Then I tried to extract some parts of the head into sub-components like mj-custom-front and mj-custom-attributes and put them in the head of the templates but I get an error when I try to compile the tempates.

Any ideas? Thanks!

[iRyusa]

Yeah this is not supported. MJML root tag is not something you can substitue inside a custom component.

…

On Sat, Sep 9, 2023 at 6:57 PM Mohamed Amine ***@***.***> wrote: Hello! I have followed this https://github.com/mjmlio/mjml-component-boilerplate, and created many components alright, but when I tried to create a component that would abstract the head and body tags like this: <mjml> <mj-head> <mj-font name="custom font" .../> <mj-attributes> <!--custom attribute values --> </mj-attributes> </mj-head> <mj-body width="custom width" ...> <mj-column> <!-- email content --> </mj-body> </mjml> But the .mjml templates wouldn't compile, complaining about the structure and missing mjml and body tags. So I tried to only extract the head into a component, and although the templates compile but it has no effect: no font and no attribute values are applied. Then I tried to extract some parts of the head into sub-components like mj-custom-front and mj-custom-attributes and put them in the head of the templates but I get an error when I try to compile the tempates. Any ideas? Thanks! — Reply to this email directly, view it on GitHub <#2743>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTJU3OSH6Z336RYNIWLXZSNXZANCNFSM6AAAAAA4RR2EOQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mabouguerra]

Thanks @iRyusa for the quick reply. What about extracting the whole head tag (which had no effect when I tried) or its sub components like font and attributes which fail to compile?

[iRyusa]

Just use the primitives and push what you need inside the head like you would do in mj-font or mj-attributes component code. Keep in mind that head is always executed first because it will have some side effect on attributes for body elements. Generally speaking it's a bad practice to use custom component to override layout, just use a templating language like mustache/pugjs or w/e that support it https://pugjs.org/language/inheritance.html

…

On Sat, Sep 9, 2023 at 7:06 PM Mohamed Amine ***@***.***> wrote: Thanks @iRyusa <https://github.com/iRyusa> for the quick reply. What about extracting the whole head tag (which had no effect when I tried) or its sub components like font and attributes which fail to compile? — Reply to this email directly, view it on GitHub <#2743 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTOQQF7ODQRV3EAQJHLXZSOZHANCNFSM6AAAAAA4RR2EOQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mabouguerra]

Thanks again for the reply, but would you please elaborate a bit more on using the primitives to achieve that? I didn't get it 😅

[iRyusa]

https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-attributes/src/index.js Just check how it's done in standard component in do the same.

…

Message ID: ***@***.*** com>

[mabouguerra]

Got it! Thank you, much appreciated.