Content attributes / SSR hints

[bennypowers]

Now that SSR is looking plausible in the near-to-mid-term, I'd like to discuss adding what I'll call content attributes and/or properties to some of our components. We've already adopted this practice in PFE owing to the more app-dev-oriented approach there, and I'd like to import the idea to RHDS.

Here's a simple example of what I mean:

Today you write:

<rh-cta>
  <a href="#">Content</a>
</rh-cta>

And you get:

<rh-cta>
  #shadow-root
    <slot></slot>
  <a href="#">Content</a>
</rh-cta>

And the user sees: Content ->

Tomorrow you'll have the option to write that as

<rh-cta href="#">Content</rh-cta>

And you'll get

<rh-cta>
  #shadow-root
    <a href="#">
      <slot></slot>
    </a>
</rh-cta>

And the user sees: Content ->

In the case of CTA, there would surely be T's to cross and I's to dot, especially regarding analytics data attrs, link targets, etc, but that's for a later discussion

This is also relevant to more complex elements like footer. imagine this hypothetical ssr/spa scenario:

const footer = () => html`
  <rh-footer
      logo="red-hat"
      logo-alt="Red Hat logo"
      social-links="linkedin, youtube, facebook, twitter"
    .links=${[
      { type: 'heading', text: 'Products'},
      { type: 'link', href: 'https://redhat.com/en/technologies/linux-platforms/enterprise-linux', text: 'Red Hat Enterprise Linux' },
      { type: 'link', href: 'https://redhat.com/en/technologies/cloud-computing/openshift', text: 'Red Hat OpenShift' },
      { type: 'link', href: 'https://redhat.com/en/technologies/management/ansible', text: 'Red Hat Ansible Automation Platform' },
      { type: 'link', href: 'https://redhat.com/en/technologies/cloud-computing/openshift/cloud-services', text: 'Cloud services' },
      { type: 'link', href: 'https://redhat.com/en/technologies/all-products', text: 'See all products' },
      { type: 'heading', text: 'Tools' },
      { type: 'link', href: "https://sso.redhat.com", text: 'My account' },
      { type: 'link', href: "https://redhat.com/en/services/training-and-certification", text: 'Training and certification' },
      { type: 'link', href: "https://access.redhat.com", text: 'Customer support' },
      { type: 'link', href: "https://developers.redhat.com/", text: 'Developer resources' },
      { type: 'link', href: "https://learn.redhat.com/", text: 'Learning community' },
      { type: 'link', href: "https://connect.redhat.com/", text: 'Partner resources' },
      { type: 'link', href: "https://redhat.com/en/resources", text: 'Resource library' },
      { type: 'heading', text: 'Try, buy & sell' },
      { type: 'link', href: "https://redhat.com/en/products/trials", text: 'Product trial center' },
      { type: 'link', href: "https://marketplace.redhat.com", text: 'Red Hat Marketplace' },
      { type: 'link', href: "https://catalog.redhat.com/", text: 'Red Hat Ecosystem Catalog' },
      { type: 'link', href: "http://redhat.force.com/finder/", text: 'Find a partner' },
      { type: 'link', href: "https://www.redhat.com/en/store", text: 'Red Hat Store' },
      { type: 'link', href: "https://cloud.redhat.com/", text: 'Console' },
      { type: 'heading', text: 'Communicate' },
      { type: 'link', href: "https://redhat.com/en/services/consulting-overview#contact-us", text: 'Contact consulting' },
      { type: 'link', href: "https://redhat.com/en/contact", text: 'Contact sales' },
      { type: 'link', href: "https://redhat.com/en/services/training-and-certification/contact-us", text: 'Contact training' },
      { type: 'link', href: "https://redhat.com/en/about/social", text: 'Social' },
    ]}>
    <!--... etc -->
  </rh-footer>
`;

[bennypowers]

Thoughts on this @heyMP ? @zhawkins ?

[zhawkins]

@bennypowers would you see this as being an additional option, or would it replace the current:

<rh-cta>
  <a href="#">Content</a>
</rh-cta>

[bennypowers]

Good question

This would be an addition, and should not replace the existing guidelines

To put it more clearly I would not accept this change if it meant that HTML using the current guidelines no longer worked

Instead the idea here is to provide an additional level of ergonomics. For example an app author in a client rendered JS scenario may wish to simplify the code which implements the CTA pattern. in that case they may wish to simply set the href attribute of the CTA, rather than writing template code which merely outputs an anchor tag related to the hyper-reference

Alternatively the author of CTA patterns in a server-side rendered CMS scenario may wish to simplify the partial template for CTA application by exposing the href attribute as a template parameter, in the case that the template author would need to be confident that the link rendered in the shadow Dom would integrate sufficiently well into the remaining requirements of that CMS, for example analytics. This however could positively affect page payloads because the resulting HTML would be slightly reduced.

[zhawkins]

I dig it 👍

Long as the current way is still valid, I fully support this additional approach. I foresee us using both.