Reusing components in different contexts #86
Description
It's commonplace to create reusable code fragments and more recently frameworks, such as React and AngularJS, have popularised the idea of components. The requirement for an itemprop attribute to be on the same element as a sub-item's itemscope, is problematic for this kind of code reuse.
For example, a component that displays the name, image and description of a person:
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">…</h1>
<img itemprop="image" src="…" alt="…">
<p itemprop="description">…</p>
</div>
This could be used in several different contexts, such as the author of an article:
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="author" itemscope itemtype="http://schema.org/Person">…</div>
</div>
Also, as a performer at, or an attendee to, an event:
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="performer" itemscope itemtype="http://schema.org/Person">…</div>
</div>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="attendee" itemscope itemtype="http://schema.org/Person">…</div>
</div>
In each context the component is used a different value for itemprop is required. If, the component were to include itemprop="author" in its definition, it would not be possible to reuse the component in a context where itemprop="performer" or itemprop="attendee" was needed.
Further, components are by design supposed to be independent of their parent. The very requirement for a parent's itemprop attribute to be in component, creates an unwanted dependency.