Links in custom components?

[bjeld]

Im creating a Custom Component that I will use as a Scaffold for all my email templates, so that each new template gets the same look and feel. Each new template can reuse this and only focus on the actual content .
Something like this:

<mjml>
  <mj-body>
     <my-custom-component 
        headline="Some headline"
        subtitle="Some subtitle"
        unsubscribe-url="Some unsubscribe url"
     >
      ....actual content
     </my-custom-component>
  </mj-body>
</mjml>

This seems to work just fine except from that it seems that links will not render after running the gulp build command -> and then sending the mail.
It renders when you open the html file in a browser, but not in the email-client nor the MJML live preview.

render() {
  return this.renderMJML(`
    <mj-section css-class="mj-layout mj-layout-${this.cssId}">
      <mj-column background-color="${this.getAttribute('background-color')}">
        ${this.renderChildren(
          this.props.children,
          {
            /* The rawXML option prevents processing on children : we already call this.renderMJML on the whole block so we don't want the children to be processed twice */
            rawXML: true,
            /* The renderer option allows to use a specific rendering function, or wrap each child if needed. Below is the default, see mj-column code for an example of this. */
            renderer: (component) => component.render,
          },
          )}
        <mj-text>
          <a href="${this.getAttribute("unsubscribe-url")}" target="_blank">unsubscribe</a>
        </mj-text>
      </mj-column>
    </mj-section>
  `)
}

So guess my real question is. Is link inside custom component supposed to be supported?

Best regards
Martin

[bjeld]

update: rendering mj-navbar with nj-navbar-link works

<mj-navbar base-url="https://mjml.io">
     <mj-navbar-link href="/gettings-started-onboard" color="#333333">Getting started</mj-navbar-link>
 </mj-navbar>

[iRyusa]

Can you paste the HTML generated through gulp ?

Only thing that I have in mind is mj-text not registered as an ending tag for some reasons

[iRyusa]

As the HTML is fine, I'm guessing the problem isn't with MJML here. Sending this HTML through putsmail.com works fine.
How did you send your email ?

[bjeld]

yeah I was thinking of that. im using the "Send Email" command (for fast test iterations) supplied by the VS-Code plugin set up with a MailJet account

[iRyusa]

Yeah you should just use https://putsmail.com/ instead. I'm guessing there's something breaking when sending mail through VsCode

[bjeld]

ill try to avoid sending from VS-Code.
Thank you for your time. Its much appreciated.

[bjeld]

can confirm it works as intended with putsmail.