Custom Attribute add binding to element

Hi all!

Let’s say I have a web-component from another library, that expects a custom attribute (‘test’ in the example below) to supply a function like that:

<another-lib-component peroperty.bind="notRelatedBinding" test.bind="method" />

So far, so good, everything works. However, I would like to create a new Custom Attribute (‘render’ in the example below) in order to be able to write something like

<another-lib-component peroperty.bind="notRelatedBinding" render />

and then the RenderAttribute should transform the element into

<another-lib-component peroperty.bind="notRelatedBinding" test.bind="method" render />

I have tried doing that using a template controller, but it seems that the template of the element is already enhanced at the time I get a reference to the ViewFactory in the controller’s constructor. Also, I couldn’t find a way to add additional binding instruction in the component’s definition.

What is the correct way of doing that?

Have a look at ViewEngineHook. It can modify templates before the rest of the engine kicks in. Here is an example aurelia-toolkit/mdc-inputmask.ts at 7c72ef4b31b5598aa3d5b98eacc43ac410dc1498 · aurelia-toolkit/aurelia-toolkit · GitHub

1 Like