Fetches any text-based document and displays its content inline. Supports authenticated Solid fetch; DOMPurify sanitization; CSS/RDFa selector to filter documents before rendering. Using sol-include to nest components supports robust modular page creation.
| Attribute | Description |
|---|---|
| source | The URL of a text-based file to fetch and render inline. |
| selector | A CSS/RDFa selector applied as a filter to the content. |
| raw | Display source text verbatim in a <pre> block sanitized, but not parsed. |
| trusted | Skip DOMPurify sanitization. |
The source attribute is the URL of a text-based file to fetch and render inline. If the source is markdown, it will be converted to HTML.
<sol-include source="https://example.org/article.html"></sol-include>The selector attribute is a CSS/RDFa selector applied as a filter to the content.
<sol-include
source="https://example.org/blog.html"
selector="article:first-of-type"
></sol-include><sol-include
source="https://solidproject.org/TR/index.html"
selector='a[typeof="doap:Specification"]'
></sol-include>raw attribute shows the source as plain text in a <pre> block. Useful for displaying the raw source of Markdown/HTML.
<sol-include source="script.js" raw></sol-include>trusted attribute disables the DOMPurify sanitizer. An HTML page containing javascript included without this attribute will treat the javascript a plain text. With this attribute, the javasript will execute on load. Use only with trusted sources.
<sol-include source="script-containing.html" trusted></sol-include>It is possible to sol-include an html document that has its own sol-include statements as well as other web-components. If, and only if, the document is marked as trusted, these components will be activated on inclusion.
This is a very powerful feature. For example a main page might have sol-includes for header.html, body.html, and footer.html. Header.html might contain a sol-login or sol-menu component, sol-include a banner. These includes do not need to be *sol-** components, they can be any custom element.
As with Javascript, only use the trusted attribute for documentss you actually trust.