Generating unique ID tags in ui:include resource

Question

I am building a page that will have multiple instances of a tag such as the following.

<ui:include id="foo" src="images/something.svg" />

The Faces Servlet passes through the svg file to the browser without any processing other than EL expressions it finds, which is fine. The problem is that the id tags in the include file are static, so multiple includes of that file will generate non-unique ID tags.

What I want to do is something like what h:form does, where the ID of the ui:include tag is prepended to the IDs of the elements in the included file. Then I could unambiguously address everything.

Is there an accepted "best practice" way of doing this?

UPDATE: perhaps I should augment this question with a follow up, which is do I need to do this in the first place? My objective is to uniquely address the tags in each of the included copies of the svg document, of which there can be any number. I have jQuery available since it is pulled in by Primefaces anyway.

So if I have a JSF file like this:

<ui:include id="foo" src="images/something.svg" />
<ui:include id="bar" src="images/something.svg" />

And inside the something.svg file I have a tag

<rect id="blink" ... />

In the javascript on the page, I want to be able to get a pointer to foo:blink or bar:blink. I suppose I could use XPath expressions but I understood those are kind of slow. I can't imagine the guys who invented the ui:include tag haven't thought about how to deal with this so I am assuming I missed something obvious.

Answer 1

Pass it as <ui:param>.

<ui:include src="images/something.svg">
    <ui:param name="id" value="foo" />
</ui:include>
<ui:include src="images/something.svg">
    <ui:param name="id" value="bar" />
</ui:include>

You can reference it by the param name #{id} in EL of the included file. E.g.

<rect id="#{id}_blink" ... />