Stable ID for sap.tnt.NavigationListItem (id vs. key) - sapui5

Question

According to the Use Stable IDs article, it is recommended to use stable IDs for the UI5 elements. At the same time, I've reviewed multiple samples of sap.tnt.NavigationListItem implementation and I've paid attention that in case of sap.tnt.NavigationListItem no id is used but key, e.g.:
<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
I've also tried to assign id to tnt:NavigationListItem and then access it from the oEvent-object via the standard oEvent.getProperty("%MY_ID%") approach but no success.
My questions:
When should I use id and when key for UI5-items in XML-templates?
Is it particular sap.tnt.NavigationListItem case that key is preferred over id or I just missed something important?

Answer 1

Based on your comments, I made a small example.
If your items are hard-coded definitely go for the key in the
XML definition.
If your items come over a model. You can do the same
as everywhere else. Use the data to trigger the right action.
Use the ID if you need to identify the UI element e.g. buttons in a test or if you add User Assistance Help.
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
items: [{
title : "1",
subItems: [
{ keyInData: "1", title : "1-a" },
{ keyInData: "2", title : "1-b" },
{ keyInData: "3", title : "1-c" },
{ keyInData: "4", title : "1-d" }
]
}],
}));
},
onItemSelect: function(oEvent) {
const item = oEvent.getParameter("item")
console.log("key over key binding: " + item.getKey() )
console.log("key over databinding: " + item.getBindingContext().getObject().keyInData )
}
});
sap.ui.xmlview("main", { viewContent: jQuery("#view1").html() } ).placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt">
<tnt:NavigationList
id="navigationList"
width="320px"
selectedKey="subItem3" items="{/items}">
<tnt:NavigationListItem text="{title}" items="{ path:'subItems', templateShareable:false}" icon="sap-icon://employee" >
<tnt:NavigationListItem text="{title} - {keyInData}" key="{keyInData}" select="onItemSelect" />
</tnt:NavigationListItem>
</tnt:NavigationList>
</mvc:View>
</script>