Attributes Merging - js-lib-com/wood GitHub Wiki

In both aggregation and inheritance we have a target component that reuses a component, in this context named source component. Consequently, elements involved into these relations definition are named target and source elements.

These elements can have attributes and build tool takes care to merge them into resulting layout.

Merging algorithm follow these rules:

all attributes from both target and source elements are copied into resulting layout,
if attribute name collides target element takes precedence,
for class attributes create a set from all classes from both target and source elements, in no particular order.

On attributes name collision, the goal is to allow target component to overwrite reused component attributes, enabling in place customization.

Inclusion

On components inclusion, attributes from child reference element on parent are merged with attributes from child component root element.

In this case target is the parent component whereas source is the child. Therefore, on attribute name collision child reference element from parent takes precedence.

compo/article/article.htm

<!-- target parent component -->
<article xmlns:wood="js-lib.com/wood">
	<!-- child reference element -->
	<section id="parent" class="text" wood:compo="compo/section"></section>
</article>

compo/section/section.htm

<!-- source child component -->
<section id="child" class="section"></section>

On resulting layout, colliding id attribute has value from parent component and class attribute sum up both parent and child classes.

<article>
	<section id="parent" class="section text"></section>
</article>

Template

When using templates, attributes from editable elements on template are merged with attributes from content elements (from content component), matching editable name.

In this case target is the content component whereas source is the template. Therefore, on attribute name collision content elements from content component take precedence.

template/page/page.htm

<!-- source template component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- editable element -->
	<section id="section1" class="section1" wood:editable="section1"></section>
	<!-- editable element -->
	<section id="section2" class="section2" wood:editable="section2"></section>
</body>

page/index/index.htm

<!-- target content component -->
<embed id="content" wood:template="template/page" xmlns:wood="js-lib.com/wood">
	<!-- content element -->
	<section id="content1" class="text1" wood:content="section1"></section>
	<!-- content element -->
	<section id="content2" class="text2" wood:content="section2"></section>
</embed>

On resulting layout, colliding id attribute has value from content component and class attribute sum up both template and content classes.

<body>
	<section id="content1" class="section1 text1"></section>
	<section id="content2" class="section2 text2"></section>
</body>

Template Fragment

If template has a single editable there is the template fragment syntax. When using template fragment, attributes from editable element on template are merged with attributes from content element (from content component).

In this case target is the content component whereas source is the template. Therefore, on attribute name collision content element from content component takes precedence.

template/page/page.htm

<!-- source template component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- editable element -->
	<section id="section" class="section" wood:editable="section"></section>
</body>

page/index/index.htm

<!-- target content component -->
<section id="content" class="text" wood:template="template/page#section" xmlns:wood="js-lib.com/wood"></section>

On resulting layout, colliding id attribute has value from content component and class attribute sum up both template and content classes.

<body>
	<section id="content" class="section text"></section>
</body>

Inline Template

Attributes from inline content elements on parent component are merged with attributes from template editable elements, matching editable name.

In this case target is the parent component whereas source is the template. Therefore, on attribute name collision inline content elements from parent component takes precedence.

page/article/article.htm

<!-- target parent component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- inline template element -->
	<article wood:template="template/article">
		<!-- inline content element -->
		<section id="section1" class="inline1" wood:content="section1"></section>	
		<!-- inline content element -->
		<section id="section2" class="inline2" wood:content="section2"></section>	
	</article>
</body>

template/article/article.htm

<!-- source template component -->
<article xmlns:wood="js-lib.com/wood">
	<!-- editable element -->
	<section id="article1" class="editable1" wood:editable="section1"></section>
	<!-- editable element -->
	<section id="article2" class="editable2"  wood:editable="section2"></section>
</article>

On resulting layout, colliding id attributes has value from parent component and class attributes sum up both parent and template classes.

<body>
	<article>
		<section id="section1" class="inline1 editable1"></section>
		<section id="section2" class="inline2 editable2"></section>
	</article>
</body>

Inline Fragment

Inline fragment is an inline template with a single editable referred from parent component with template fragment syntax. Attributes from inline template element on parent component are merged with attributes from template editable element.

In this case target is the parent component whereas source is the template. Therefore, on attribute name collision inline template element from parent component takes precedence.

page/index/index.htm

<!-- target parent component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- inline template element -->
	<section id="section" class="inline" wood:template="template/article#section"></section>
</body>

template/article/article.htm

<!-- source template component -->
<article xmlns:wood="js-lib.com/wood">
	<!-- editable element -->
	<section id="article" class="editable" wood:editable="section"></section>
</article>

On resulting layout, colliding id attribute has value from parent component and class attribute sum up both parent and template classes.

<body>
	<article>
		<section id="section" class="inline editable"></section>
	</article>
</body>

Last updated 9/8/2022.