Customize CSS of List Item dynamically via binding (https://stackoverflow.com/a/56397508/5846045, https://stackoverflow.com/a/42232902/5846045)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_horizon"
      data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-async="true"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-excludeJQueryCompat="true"
      data-sap-ui-resourceRoots='{ "demo": "./" }'
      data-sap-ui-xx-waitForTheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.getModel("homeView").setData({ applyStyle: true });
      this.getRouter().initialize();
    },

  });
});

{
  "_version": "1.56.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "myDataSource": {
        "uri": "localData/demoData.json",
        "type": "JSON"
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.71",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.unified": {},
        "sap.ui.layout": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": [
        {
          "id": "demo",
          "uri": "ui5://demo/css/style.css"
        }
      ]
    },
    "models": {
      "": {
        "dataSource": "myDataSource"
      },
      "homeView": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML"
    },
    "routing": {
      "routes": [
        {
          "name": "home",
          "pattern": "",
          "target": "home"
        }
      ],
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "transition": "fade",
          "level": 1
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "level": 98
        }
      },
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
  displayBlock="true"
>
  <App id="rootApp" class="myApp" autoFocus="false">
    <pages>
      <!-- will be added by Router -->
    </pages>
  </App>
</mvc:View>

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{ BooleanType: 'sap/ui/model/type/Boolean' }"
>
  <Page title="Apply Custom Style">
    <headerContent>
      <Switch
        state="{
          path: 'homeView>/applyStyle',
          type: 'BooleanType'
        }"
        customTextOff=" "
        customTextOn=" "
      />
    </headerContent>
    <List class="myList"
      growing="true"
      items="{
        path: '/collection',
        key: 'key'
      }"
    >
      <CustomListItem class="myCustomListItem">
        <Title text="{text} {key}" />
      </CustomListItem>
      <customData>
        <core:CustomData
          key="my-awesome-style"
          value=""
          writeToDom="{
            path: 'homeView>/applyStyle',
            type: 'BooleanType'
          }"
        />
      </customData>
    </List>
  </Page>
</mvc:View>

{
    "collection": [
        {
            "key": 1,
            "text": "Custom List Item "
        },
        {
            "key": 2,
            "text": "Custom List Item "
        },
        {
            "key": 3,
            "text": "Custom List Item "
        }
    ]
}

.myApp .sapMList.myList[data-my-awesome-style] .sapMLIB {
  background: gold;
  height: 3rem;
  padding: 0 1rem;
}