O'Reilly logo

Developing Web Components by Jason Strimpel, Jarrod Overson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 12. Creating Custom Elements

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required