Accessing custom property of hostComponent when skinning - Flex 4.5, SDK 4.5

Question

Using SDK 4.1 I was able to access custom properties of a custom button component from a custom skin. The project I'm currently working requires SDK 4.5 and I'm unable to to access the properties. Here's an example:

Custom Button Component

<?xml version="1.0" encoding="utf-8"?>
<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          skinClass="components.skins.ButtonIcon_Skin"
          >
    <fx:Declarations>
        <fx:String id="iconCustom" />
    </fx:Declarations>
</s:ButtonBase>

Custom Button Skin

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
    <fx:Metadata>[HostComponent("components.ButtonIcon")]</fx:Metadata>

...

    <s:Label id="test" {hostComponent.iconCustom}" 
             horizontalCenter="0" bottom="10" />

</s:SparkButtonSkin>

The code hint shows hostComponent.iconCustom but then gives the error :

Access of possibly undefined property iconCustom through a reference with static type spark.components.supportClasses:ButtonBase. ButtonIcon_Skin.mxml

Answer 1

Just replace that SparkButtonSkin with a regular Skin and you'll be just fine:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("components.ButtonIcon")]
    </fx:Metadata>

    <s:states>
        <s:State name="disabled" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="up" />
    </s:states>

    <s:Label text="test {hostComponent.iconCustom}" 
             horizontalCenter="0" bottom="10" />

</s:Skin>

Answer 2

Another option, if you want to use SparkButtonSkin, just cast to your actual hostComponent

(hostComponent as ButtonIcon).iconCustom

or in context:

Custom Button Skin

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
    <fx:Metadata>[HostComponent("components.ButtonIcon")]</fx:Metadata>

...

    <s:Label id="{(hostComponent as ButtonIcon).iconCustom}" 
             horizontalCenter="0" bottom="10" />

</s:SparkButtonSkin>