byuweb/byu-theme-components

Use custom html tags

jfbrennan opened this issue · 1 comments

jfbrennan commented

Description

Hi!

Found this project after reading Joseph Moore's blog (https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb)

Very cool to see BYU embracing Web Components for shared components instead of following false prophets (read: React) ;)

Anyway, you should also consider custom HTML tags. These are like micro-Custom Elements and are a much better way to offer styles than with classes.

For example, your .page-content (documented here: http://2017-components-demo.cdn.byu.edu) could have been implemented like this:

byu-page-content {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

You would offer that "micro" component along with the other core components (devs don't need to know the implementation difference, i.e. custom HTML tag vs. Custom Element).

Your example page layout would now look like this:

<html>
    <body>
        <byu-header>
            <h1 slot="site-title">Your Site Title Here</h1>
        </byu-header>

        <byu-page-content>
            <!-- Put your site content here -->
        </byu-page-content>

        <byu-footer></byu-footer>
    </body>
</html>

There is nothing special about this. No tools, no hacks, no dependencies.

I did this at Expedia and now at Avalara. You can read more about it if you're curious: https://www.avalara.com/us/en/blog/2018/10/better-ui-components.html

Issue Type

  • [ x ] A request for a new feature/enhancement?
Gi60s commented

That's a great comment. I can't remember why we choose to go the way we did. It might have been browser compatibility concerns (internet explorer) or we might not have thought about this alternative at the time. At this point we'll probably wait until we do a v2.0 release before changing this, but there are several of us that discuss this and figure out the steps we should be taking. We'll bring this up in one of those meetings and see what conclusions we come to.

Have a great day!