Custom html elements

Yeah you can use different tag names in your custom component

const dc = editor.DomComponents;
const defaultType = dc.getType('default');

dc.addType('my-custom-type', {

  model: defaultType.model.extend({
    tagName: `custom-tag`
  }, {
    isComponent(el) {
        if(el.tagName == 'CUSTOM-TAG') 
          return {type: 'my-custom-type'}
    },
  }),

  view: defaultType.view.extend({
     tagName: 'div' //<-- in canvas div will be used
  })
});

Thanks @artf, that points me in the right direction.

If I want the anything that needs to be editable in the block to appear in the custom tag code, how would I achieve that?

You mean something like this?

editor.BlockManager.add('custom-block', {
     label: 'Custom Block'
     content: '<custom-tag>...</custom-tag>',
})