Designer support

[jogibear9988]

Hey, I like your idea, but I'm thinkin of a good way, how I could add support for my designer:

https://node-projects.github.io/web-component-designer-demo/index.html

At the moment I could import your lib and the content will render:

But it's not really that usefull, cause the elements in the dom I parse, are not the ones displayed (as you transform them).

What do you think is a good idea? Only be able to select the outer Element, for example the "dce-1-slot" in the sample?

And is there a way I could access the properties/attributes etc defined by the element? (Could it define some?)

[sashafirsov]

@jogibear9988 ,

The protocol for defining DCE attributes is not defined yet. There is a discussion somewhere but it is not productive at the moment. If you want to use DCE as any another custom element, then the NPM package with DCE code should come with custom elements manifest . In the example it is not really useful component so there was no point of manifest creation. If you want to create custom element in your designer, you can generate the manifest and consume it.

What we can do differently, is to define the declarative protocol of attributes definitions. Something like

<custom-element tag="xxx">
    <attribute name="param1" title="pretty parameter">default value</attribute>

That way the generated <xxx element could adopt the param1 attribute. In designer you can propagate this attribute along with metadata like default value, tag, legend(from title).

LMN if you like such approach, I would update the implementation. Or you welcome to make a PR.

display in designer

In designer you would need to have a concept of libraries ( something like a palette ). In this palette you can select and edit DCE declaration itself. When it is done on lib level, the page level would be able to work with tags (DCE instances) with attributes defined in DCE declaration.

I am available over WCCG discord chat if real-time conversation would be easier.

[jogibear9988]

Ah, that are all good ideas. I'm thinking if the basic designer framework should get the concept of components (declared in it). I already did nearly the same in a usage of the designer: http://129.159.205.3:8082/webui/index.html (a ui for ioBroker a home automation system). There I also can declare custom elements, with custom attributes and properties, but it's not declaritive as your idea. Need to think about what I want in the basic designer. As the Desinger itself is only a sample of how you can include it in other projects.

[jogibear9988]

But I still need to think about how to use elements like yours anyway. Normally you then would use a customelment like this:

  <dce-link><i>🍋</i></dce-link>

but this will not work correctly in designer, as your custom element modifies the DOM of itself. I need to look how I support this... Cause the original 🍋 I hand over to your component is removed.

Why do you not render to shadow dom? Is it cause of styling?

[sashafirsov]

The rendered and initial DOM are similar to template with slots. They are different . To hide the initial DOM, it can be wrapped into <template> like

 <dce-link><template><i>🍋</i></template></dce-link>

The final DOM is rendered without shadow DOM as of now. It would be simple to add such option though. The reason of using open styling is in most popular use cases: in CMS the styling usually follow site-scoped theme, and it would not be possible with shadow. Besides, there is no efficient mechanizm of sharing styles between shadow root. So in the lack of proper styling support on w3c side, I choose most convenient for user way.

In designer I would suggest to split the DCE definitions and instances. When working on instance, the payload serving the same goal as in any web component with slots.

On preview panel DCE would need 2 separate tabs: initial DOM and rendered DOM the last may be not needed as available over browser dev tools. Which leaves the initial DOM as only content for DCE instance.