Web Components

Utilizing Strife Web Components is a straightforward process that doesn't demand extra markup on your page. Use the attributes below in your existing markup where you want to display your content.

Basically, you 'enhance' your standard HTML tag by merely adding the "str-" prefix to the tag name and utilizing it in the 'is' attribute.

This is an example using the H1 tag:

<h1 is="str-h1" data-field="heading">Hello, world!</h1>

Explore the comprehensive list of Web Components grouped into Text, Container, and Custom categories. Our aim is to provide a web component for every tag used in content rendering.

Text Components

The Strife Web Components in this category exclusively replace the textContent of the corresponding HTML element. Below is a compilation of Strife Web Components falling under the 'text' category:

'str-address', 'str-p', 'str-span', 'str-strong', 'str-h1', 'str-h2', 'str-h3', 'str-h4', 'str-h5', 'str-h6', 'str-abbr', 'str-b', 'str-button', 'str-cite', 'str-code', 'str-dfn', 'str-em', 'str-i', 'str-label', 'str-mark', 'str-q', 'str-sub', 'str-sup'

Container Components

Container components replace the innerHTML of their corresponding HTML element. Here is a list of all available container Strife Web Components.

'str-div', 'str-ul', 'str-ol', 'str-section', 'str-header', 'str-footer', 'str-nav', 'str-article', 'str-main', 'str-aside', 'str-blockquote'

Custom Components

Some Strife Web Components are tailored to work exclusively with specific fields in the template and are not compatible with others. These specialized components include:

'str-anchor', 'str-img', 'str-picture', 'str-time'

Some of them come with additional attributes beyond the is and data-field attributes. Explore these below.