Developing Web Components

Chapter 12. Creating Custom Elements

Jason Strimpel

Raise your hand if you have seen markup like this:

<ul class="product-listing">
    <li class="product">
        <img src="img/log.jpg" alt="log" />
        <h3>log</h3>
        <p>
            What rolls down stairs<br />
            alone or in pairs,<br />
            and over your neighbor's dog?<br />
            What's great for a snack,<br />
            And fits on your back?<br />
            It's log, log, log<br />
        <p>
        <ul class="reviews">
            <li class="review">
                <div class="reviewer">
                    <img src="img/rcrumb.jpg" alt="R. Crumb" />
                    <div class="reviewer-name">R. Crumb</div>
                </div>
                <p>
                    We are living surrounded by illusion, by professionally
                    created fairy tales. We barely have contact with the real
                    world.
                </p>
            </li>
        </ul>
    </li>
</ul>

This markup is fairly semantic, and you can easily determine its intent. However, what if you could make it even more semantic and easier to understand? Consider this version:

<product-listing>
    <product-desc name="log" img="img/log.jpg">
        What rolls down stairs<br />
        alone or in pairs,<br />
        and over your neighbor's dog?<br />
        What's great for a snack,<br />
        And fits on your back?<br />
        It's log, log, log<br />
        <product-reviews>
            <product-review>
                <product-reviewer name="R. Crumb" img="img/rcrumb.jpg" />
                We are living surrounded by illusion, by professionally
                created fairy tales. We barely have contact with the real
                world.
            </product-review>
        </product-reviews>
    </product-desc>
</product-listing>

All the extraneous markup and properties have been eliminated, making it understandable at a glance. Until ...