Custom Element Property Scope

Is there a mechanism for defining a property in one Custom Element and accessing that property in another Custom Element or are the properties accessible only within the scope of their own Element?

Properties are scoped to the Component.

If you give me an idea of what you’re trying to do I might be able to suggest a couple of options :slight_smile:

This maybe jumping the gun given that this post from @dan - Work in Progress - Sitelok - #4 by dan - says that access to dev tools is on the way?

I am trying to setup an initialisation Custom HTML component for the page that you just drop onto the top of the page and then can configure it via its properties whose properties should then be accessible from other related components on the page.

@bon Is it possible to set a custom page property in one custom component that could be checked in custom components on the page?

there’s no way a Component can read another Component’s property values. The properties are scoped to each Component instance.

It sounds like you need page/project level properties that allow you to set properties that any Component could access. Unfortunately we don’t support that right now, but we do have plans for something along these lines in the future.

For now you would have to figure out a way to communicate between your Components, but keep in mind the components are not able to read another component’s properties from within Elements.

You could expose property values in preview/publish via local storage, some form of event system, or data- attributes - it all depends on the use case :slight_smile:

Hope that helps!

Yes, that is what I was looking for. Will the developer tools, when they are released, help with this?

No, the developer tools have the same functionality as a Custom Component with regards to this.

We simply don’t have a way (right now) for two separate Components to read/set properties on each other.

1 Like