After 4 hours, I did something like this:
const { id: addonID } = require('sdk/self');
const toWidgetId = id =>
('action-button--' + addonID.toLowerCase()+ '-' + id).
replace(/[^a-z0-9_-]/g, '');
And though it's the right id now, the menu is not attached to the button in the following lines:
let id = toWidgetId(this.id);
console.log("wID=" + id);
var thisNode = document.getElementById(id);
thisNode.appendChild(this.pp);
-------------------------------------------------------------------------------------------------------------
Now, I have another version of the addon, without the sdk button and there everything work, except that can't get it off the toolbar, it's not customizabl, it's stuck to it. I attached it like this:
var utils = require('sdk/window/utils');
var document = utils.getMostRecentBrowserWindow().document;
...
var navBar = document.getElementById('nav-bar');
navBar.appendChild(this.bt);
If I could get it in the bar while being customizable, I might give up on the sdk class extension way and just use it without any classes.
Phew, Firefox addon development is HARD! Wow!