PHPackages                             linkorb/custom-element - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. linkorb/custom-element

ActiveLibrary[Utility & Helpers](/categories/utility)

linkorb/custom-element
======================

Custom element

v1.0.0(4y ago)068MITPHPPHP >=7.4.0

Since Nov 14Pushed 4y ago1 watchersCompare

[ Source](https://github.com/linkorb/custom-element)[ Packagist](https://packagist.org/packages/linkorb/custom-element)[ Docs](http://www.github.com/linkorb/custom-element)[ RSS](/packages/linkorb-custom-element/feed)WikiDiscussions master Synced 5d ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Custom Element
==============

[](#custom-element)

This library allows you to define custom elements for usage in (Twig) templates.

Think of it as light-weight SSR (Server Side Rendererd) Web Components.

For example, you can create a new element such as ``

Then you define a twig template `elements/Avatar.html.twig` such as the following:

```

    {{username}}
    {% if imageUrl is defined %}

    {% endif %}
    {% if bio is defined %}
      {{ bio }}
    {% endif %}

```

Your custom element can now be rendered using your custom element template. The template receives a variable for every specified attribute.

Custom elements will only be rendered if they start with an upper-case character (to distinguish standard from custom elements)

Usage
-----

[](#usage)

### Symfony

[](#symfony)

Add the following to your `services.yaml` to register the renderer and the twig extension:

```
services:
    LinkORB\Component\CustomElement\Twig\CustomElementExtension:
        tags: ['twig.extension']
    LinkORB\Component\CustomElement\CustomElementRenderer: ~
```

### The renderer

[](#the-renderer)

You can turn any raw HTML with custom elements into a rendered HTML output like this:

```
$renderer = new Renderer($twig);
$html = $renderer->render($htmlWithCustomElements);
```

### The Twig extension

[](#the-twig-extension)

You can render custom elements from any Twig template using the filter:

```
Example