Protect contents of elements wrapped in <Localized>

[stasm]

Sometimes it's desirable to only allow translation of props on elements wrapped in <Localized>. The children of the element should be protected from buggy translations which may accidentally try to set children of the wrapped component anew.

I suggest we add a boolean attrsonly prop to <Localized> which tells it to ignore the value of its corresponding Fluent message.

Consider a wrapped element which only expects its props to be localized:

<Localized id="prompt" attrsonly>
    <Prompt … />
</Localized>

Everything works as expect in the ideal scenario when the translation has a null value:

# The <Prompt> component requires two props to be localized.
# The value should remain null.
prompt =
    .ok = OK
    .cancel = Cancel

However, a buggy translation should still not be allowed to change the children of <Prompt>:

# This translation mistakenly tries to set text as children of <Prompt>
prompt = I'm a buggy translation.
    .ok = OK
    .cancel = Cancel

This also applies to the overlays logic, where the same thing may happen for elements passed to <Localized> as props.

[stasm]

This also applies to the overlays logic, where the same thing may happen for elements passed to <Localized> as props.

Wrapped elements might not expect an extra prop, so we'll need a level of indirection. This can be achieved for instance with an id-less <Localized> wrapping the prop:

<Localized id="hello"
    clickablePortrait={
        <Localized attrsonly><Portrait.../></Localized>
    }
>
    <p>{"Hello, <clickablePortrait></clickablePortrait>!"}</p>
</Localized>

[soerenBoisen]

Another way to impement this would be to take advantage of existing attrs attribute:

<Localized attrs={{ children: false }}>
    <MyComponent>
         <ProtectedChild />
    </MyComponent>
</Localized>

To me, this makes more sense since children is just an attribute with special handling.