Remove Custom Elements From Your Output
When you create a component with WebC that includes at least one
<style> tag, WebC keeps the custom element in the output it generates.
This way, if you’re creating a web component — that is, you’re defining a new element in the custom element registry — the custom element you’ve defined is in the markup so that the browser can upgrade it.
Or, if you’re simply using the custom element in some of you CSS selectors, it will actually be there for those selectors to match.
But sometimes you may be defining styles in your WebC component that don’t rely on the custom element. Sometimes you just want to take advantage of the single file component format to colocate the styles for this set of markup with the markup itself.
Consider this rudimentary hero component:
Because of the
<style> tag in this component, our final output will include the
<hero-block> custom element.
Since we’re not using the
hero-block element for anything, we may not want it in our markup.
We’d rather it be removed as if the component were an HTML-only component.
We have two choices for how to remove the
<div>in our hero component
Explicitly remove the custom element
We can explicitly mark a custom element — or, indeed, any element — for removal by adding the
webc:nokeep attribute to the tag.
webc:nokeep has the advantage of allowing us to selectively remove the custom element in some situations, while leaving it in place in others.
The disadvantage is that, if we always want to remove the custom element, we have to remember to add the
Forgetting to add the attribute could result in our layouts getting messed up because of an extra element in the markup.
Automatically remove custom elements
We can also configure our hero component so that WebC automatically removes the custom elements anywhere it’s used.
For this, we need to add
webc:root="override" to our root
This approach guarantees that the custom element —
<hero-block> — is always removed from the output.
How it works
webc:root attribute tells WebC to merge this root element with the custom element for the component.
This can be used so that if you have a
style attribute set on both the custom element where it is invoked, and on the root element of the component, those attributes will be merged in the output.
When the root element of the component is merged into the custom element, the root element is discarded unless we set it to “override.” With a value of “override,” the
webc:root attribute will remove the custom element and replace it with the component’s root element.
- Override the host component tag in the Eleventy docs
- webc:root in the WebC docs