Return to Home

Step 5. WebC Components

You can call a WebC component in many different ways and from different types of templates. We'll try something here, let's split that piece of code we wrote earlier to produce the blog list into a component.

Create a new file at /_includes/components/link-list.webc. Cut the code from /index.md and turn it from Liquid into WebC syntax:

<ul>
  <li webc:for="link of list">
    <a :href="link.url" @text="link.data.title"></a>
  </li>
</ul>

WebC Component Syntax

I strongly recommend reading the WebC docs but since I know some won't, let me give you the tl;dr. First, as stated last step, WebC is just HTML. Beyond that the first thing to learn is the WebC directives. They instruct the parser on how to handle various elements.

webc:keep and webc:nokeep

These are pretty straightforward. They tell WebC whether to keep or discard the host element after parsing. Nokeep is default. One particular place you will need to make a choice is when you use style or script elements, as they will work in bundler mode by default. Don't worry about this now, we'll cover it in the next step.

webc:import

Import a component from a file that's not in the components path. You can also import a package with a WebC component directly from NPM.

webc:if, webc:elseif, webc:else

Conditionally render elements.

webc:for

Iterates over iterables like arrays with "x of y" syntax and iterates over objects with "x in y" syntax. You can nest loops but you cannot access the scope of the outer loop from the inner loop yet.

Slots

Slots are defined to pass a block of HTML into a component and the default one is filled with the content between the opening and closing tags. You can also give them names, please review the documentation for more details on slots.

Props (@)

Props are server directives that do not end up in the final HTML. They are prefixed with @ and are otherwise the same as other attributes. A few you've already seen are @text to set text content and @html to set inner HTML content. You can also use @raw to add already rendered HTML you do not need parsed with WebC.

There are a few more we will discuss as we get into some further concepts in later chapters.

Using the Component

You can call this component from anywhere in WebC and even in Liquid with a plugin shipped with 11ty to run a non-default template. Add the Render Template to your .eleventy.js:

import { RenderPlugin } from "@11ty/eleventy";

...


eleventyConfig.addPlugin(RenderPlugin);

Then, in your /index.md, you can call the component like this:

## Blog Articles

{% renderTemplate "webc", collections %}
<link-list webc:import="_includes/components/link-list.webc" :list="blog">
</link-list>
{% endrenderTemplate %}

Notice that unlike standard WebC usage, I need to pass a context to the component specifically. This is admittedly really cool if feeling a bit hacky. Let's assume we do not want to import every component, but have some globally available to 11ty. We can do that in our config by passing in a new option in 11ty config to the WebC plugin: '

eleventyConfig.addPlugin(pluginWebc, {
    components: "_includes/components/*.webc"
});

Now, the WebC components in the _includes/components/ directory are available everywhere and do not need to be imported manually. You can tell this works by removing the webc:import attribute from the component call in /index.md. Let's go ahead an remove the social links section as I really want that in the site footer and it was just an example for how to utilize data.

Return to Home