<!-- 
RSS generated by JIRA (9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b) at Mon Feb 12 06:25:44 CET 2024

It is possible to restrict the fields that are returned in this document by specifying the 'field' parameter in your request.
For example, to request only the issue key and summary append 'field=key&field=summary' to the URL of your request.
-->
<rss version="0.92" >
<channel>
    <title>Magnolia - Issue tracker</title>
    <link>https://jira.magnolia-cms.com</link>
    <description>This file is an XML representation of an issue</description>
    <language>en-uk</language>    <build-info>
        <version>9.4.2</version>
        <build-number>940002</build-number>
        <build-date>19-01-2023</build-date>
    </build-info>


<item>
            <title>[PAGES-1167] Incorrect placement of green bars with Web Components</title>
                <link>https://jira.magnolia-cms.com/browse/PAGES-1167</link>
                <project id="12087" key="PAGES">Magnolia pages module</project>
                    <description>&lt;p&gt;&lt;em&gt;Status: For PD Developer:&lt;/em&gt;&#160;[See call notes|&lt;a href=&quot;https://wiki.magnolia-cms.com/display/DEVINT/Web+Components+in+Page+Editor+-+Prodyna&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://wiki.magnolia-cms.com/display/DEVINT/Web+Components+in+Page+Editor+-+Prodyna&lt;/a&gt;]&lt;br/&gt;
&#8212;&lt;/p&gt;

&lt;p&gt;Dear Magnolia Team,&lt;/p&gt;

&lt;p&gt;as we discussed in our meeting on the 9th of May with J&#252;rgen Br&#246;mmer, Richard Gange and Christopher Zimmermann,&lt;br/&gt;
we provide a minimal example (Simple Webcomponent Example.zip) of our problem as well as some ideas for a solution from our side.&lt;br/&gt;
We also describe our problem in more detail.&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;Introductiontotheproblem%3A&quot;&gt;&lt;/a&gt;Introduction to the problem:&lt;/h2&gt;

&lt;p&gt;In our freemarker files we are using webcomponents with named and unnamed slots as definined by the webcomponent standard.&lt;br/&gt;
The&#160;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Web_components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Mozilla documentation&lt;/a&gt;&#160;gives a good overview over webcomponents.&lt;br/&gt;
&lt;a href=&quot;https://kinsta.com/blog/web-components/&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Here&lt;/a&gt;&#160;you also find a comprehensive guide with some example.&lt;/p&gt;

&lt;p&gt;All our freemarker files only consists of one single webcomponent. e.g.&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-html&quot;&gt;
# example freemarker file
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;ui-cms-text-image-video body=&lt;span class=&quot;code-quote&quot;&gt;&apos;{Custom JSON with Dialog values}&apos;&lt;/span&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/ui-cms-text-image-video&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;We provide all information of the dialogs to the webcomponent. The webcomponent is then responsible for building the visual html elements that the user or editor can see.&lt;/p&gt;

&lt;p&gt;As you can see in the image &quot;Screenshot of editor view&quot; in some webcomponent usage scenarios the editor bar of a component is placed at the wrong place.&lt;br/&gt;
&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;a id=&quot;111502_thumb&quot; href=&quot;https://jira.magnolia-cms.com/secure/attachment/111502/111502_Scrreenshot+of+editor+view.png&quot; title=&quot;Scrreenshot of editor view.png&quot; file-preview-type=&quot;image&quot; file-preview-id=&quot;111502&quot; file-preview-title=&quot;Scrreenshot of editor view.png&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/thumbnail/111502/_thumb_111502.png&quot; style=&quot;border: 0px solid black&quot; role=&quot;presentation&quot;/&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;Detaileddescriptionoftheproblem%3A&quot;&gt;&lt;/a&gt;Detailed description of the problem:&lt;/h2&gt;

&lt;p&gt;In our example we provide three magnolia components.&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;wrapper-componet
	&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
		&lt;li&gt;this component simply holds an area so that you can place the two other components in it.&lt;/li&gt;
	&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;test-text
	&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
		&lt;li&gt;this component simply shows some text&lt;/li&gt;
	&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;test-text-with-slot
	&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
		&lt;li&gt;this component uses the same webcomponent as the one above but also provides a slot name&lt;/li&gt;
	&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;We now take a closer look at wrapper component.&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-html&quot;&gt;
# wrapper-component.ftl
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;wrapper-component&amp;gt;&lt;/span&gt;
    [@cms.area name=&lt;span class=&quot;code-quote&quot;&gt;&quot;myTestArea&quot;&lt;/span&gt;/]
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/wrapper-component&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;The underlying template of the&#160;&lt;tt&gt;wrapper-component&lt;/tt&gt;&#160;webcomponent looks as follows:&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-html&quot;&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div style=&lt;span class=&quot;code-quote&quot;&gt;&quot;background-color:#1589FF;&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot name=&lt;span class=&quot;code-quote&quot;&gt;&quot;mySlotName&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div style=&lt;span class=&quot;code-quote&quot;&gt;&quot;height: 50px;&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div style=&lt;span class=&quot;code-quote&quot;&gt;&quot;padding-top: 150px;&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;1) When you place the test-text (Text Component) component in the wrapper-component, the editor bar for the test-text component is placed correctly. The area top editor bars not.&lt;/p&gt;

&lt;p&gt;This can be explained, due to the fact that we use an unnamed slot&#160;&lt;em&gt;&amp;lt;&lt;tt&gt;slot&amp;gt;&amp;lt;/slot&amp;gt;&lt;/tt&gt;&lt;/em&gt;&#160;that will receive all html elements without slot name that are placed within the&#160;&lt;span class=&quot;error&quot;&gt;&amp;#91;wrapper-component&amp;#93;&lt;/span&gt;&#160;tags.&lt;br/&gt;
This means that also the editor bars div tags will be placed into this slot alongside the test-text webcomponent. The order of the html elements stays the same.&lt;/p&gt;

&lt;p&gt;2) When you place the test-text-with-slot-name (Text Component (Named Slot)), the editor bar for the test-text component is placed below the component. The top area bars are still placed inside the blue container and not above it.&lt;/p&gt;

&lt;p&gt;You see the text on the very top of the container, whereas the editor bars are on the very bottom. This can be explained, because the editor bars are placed in the unnamed slot, which ist the last element in the template.&lt;br/&gt;
On the other side, the test-text component with slot name will be placed in the first element&#160;&lt;em&gt;&amp;lt;&lt;tt&gt;slot name=&quot;mySlotName&quot;&amp;gt;&amp;lt;/slot&amp;gt;&lt;/tt&gt;&lt;/em&gt;&#160;in the webcomponent template.&lt;br/&gt;
Hence the editor bar for the component and the area are underneath the text component.&lt;/p&gt;

&lt;p&gt;So we have one problem for the component and one problem for the area.&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;Ideasforasolution&quot;&gt;&lt;/a&gt;Ideas for a solution&lt;/h2&gt;

&lt;p&gt;We see two steps that are necessary for a fully functional solution:&lt;/p&gt;
&lt;h3&gt;&lt;a name=&quot;Individualslottingofeditorbars&quot;&gt;&lt;/a&gt;Individual slotting of editor bars&lt;/h3&gt;

&lt;p&gt;The solution we see here is, that magnolia could provide slot names on the mgnlEditor Bars for the area&#160;&lt;tt&gt;mgnlEditorBarStart&lt;/tt&gt;&#160;and&#160;&lt;tt&gt;mgnlEditorBarEnd&lt;/tt&gt;&#160;and component&#160;&lt;tt&gt;mgnlEdtorBar&lt;/tt&gt;.&lt;/p&gt;

&lt;p&gt;The rendered editor bar would look like this for example:&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-html&quot;&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div slot=&lt;span class=&quot;code-quote&quot;&gt;&quot;mgnlEditorBarStart&quot;&lt;/span&gt; class=&lt;span class=&quot;code-quote&quot;&gt;&quot;mgnlEditorBar mgnlEditor area start mgnlEditorBarStatusIndicator focus&quot;&lt;/span&gt; style=&quot;&quot;&amp;gt;&lt;/span&gt;...&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;This means a developer of a webcomponent could choose for himself were to place the editor bars. The following example demonstrates the webcomponent template:&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-html&quot;&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div style=&lt;span class=&quot;code-quote&quot;&gt;&quot;background-color:#1589FF; padding-top: 149px;&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot name=&lt;span class=&quot;code-quote&quot;&gt;&quot;mgnlEditorBarStart&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot name=&lt;span class=&quot;code-quote&quot;&gt;&quot;mySlotName&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div style=&lt;span class=&quot;code-quote&quot;&gt;&quot;height: 200px&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;slot name=&lt;span class=&quot;code-quote&quot;&gt;&quot;mgnlEditorBarEnd&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/slot&amp;gt;&lt;/span&gt;
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;In the magnolia component/area definition you could turn on/turn off this feature by using e.g.&#160;&lt;em&gt;useEditorBarSlots: true&lt;/em&gt;.&lt;br/&gt;
Allowing this setting is necessary, because if a developer only uses an unnamed slot, all elements for a named slot will not be displayed.&lt;br/&gt;
The default behaviour would be that magnolia does not provide a slot name. Only if the developer uses the proposed setting, the slot name will be placed on the div for the editor bar.&lt;/p&gt;
&lt;h3&gt;&lt;a name=&quot;Placingalleditorbarsinsidethewebcomponent&quot;&gt;&lt;/a&gt;Placing all editor bars inside the webcomponent&lt;/h3&gt;

&lt;p&gt;We think that the first proposed solution should already work fine, but we are not a 100 % sure. So in case the first solution does not work properly you should consider to place all editor bars inside the webcomponent.&lt;/p&gt;

&lt;p&gt;For area bars this is working already, so the follwoing text applies for components.&lt;/p&gt;

&lt;p&gt;It must be possible to register other html Tags other than&#160;&lt;tt&gt;div&lt;/tt&gt;&#160;so that the edior bars will be placed inside the webcomponents.&lt;br/&gt;
From analyzing the magnolia code we saw that the following method is responsible for placing the editor bar either within the html element or before it. (see info.magnolia.ui.vaadin.external.gwt.client.editor.dom.processor.AbstractMgnlElementProcessor#attach). The logic of this code only looks for a&#160;&lt;tt&gt;div&lt;/tt&gt;&#160;element.&lt;br/&gt;
We could imagine that it could be possible to register new html elements or prefixes of html elements, so that we can also place the editor bars within our webcomponents.&lt;br/&gt;
Since the code responsible for inserting the editor bars is using the java to javascript GWT generator, it could be possible to add element names to a global javascript array.&lt;/p&gt;

&lt;p&gt;So an easy way would be that a developer could manually register a unique webcomponent name wihtin a global javascript array.&lt;br/&gt;
A more advanded way could be that the developer can define that unique webcomponent name in the component/area definition (e.g. tagName)&lt;/p&gt;

&lt;p&gt;We hope that this clarifies our problem and gives you a good example.&lt;br/&gt;
If you have further questions, please do not hesitate to ask us.&lt;/p&gt;

&lt;p&gt;Regards&lt;br/&gt;
Ferdinand, Fabian&lt;/p&gt;</description>
                <environment></environment>
        <key id="132988">PAGES-1167</key>
            <summary>Incorrect placement of green bars with Web Components</summary>
                <type id="2" iconUrl="https://jira.magnolia-cms.com/secure/viewavatar?size=xsmall&amp;avatarId=10891&amp;avatarType=issuetype">New Feature</type>
                                            <priority id="6" iconUrl="https://jira.magnolia-cms.com/images/icons/priorities/neutral.gif">Neutral</priority>
                        <status id="10433" iconUrl="https://jira.magnolia-cms.com/images/icons/statuses/generic.png" description="This issue has been evaluated by development and accepted to be planned in.">Accepted</status>
                    <statusCategory id="2" key="new" colorName="default"/>
                                    <resolution id="-1">Unresolved</resolution>
                                        <assignee username="rsiska">Robert &#352;i&#353;ka</assignee>
                                    <reporter username="fillsinger">Fabian Illsinger</reporter>
                        <labels>
                    </labels>
                <created>Wed, 17 May 2023 11:50:42 +0200</created>
                <updated>Wed, 13 Dec 2023 11:37:43 +0100</updated>
                                            <version>6.2</version>
                                                        <due></due>
                            <votes>0</votes>
                                    <watches>10</watches>
                                                                                                                <comments>
                            <comment id="358678" author="czimmermann" created="Fri, 26 May 2023 12:48:00 +0200"  >&lt;p&gt;Ferdinand, Fabian - thanks for the detailed expllanation and example. We&apos;ll take a look at it.&lt;/p&gt;</comment>
                            <comment id="374369" author="czimmermann" created="Fri, 1 Sep 2023 15:12:59 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=fillsinger&quot; class=&quot;user-hover&quot; rel=&quot;fillsinger&quot;&gt;fillsinger&lt;/a&gt;&#160;, Ferdinand recently wrote in email:&#160;&lt;/p&gt;
&lt;blockquote&gt;&lt;ol&gt;
	&lt;li&gt;When testing the solution as an alternative to Bartosz&#8217;s workaround, we found that the start and end bars were not yet receiving the slot name. It worked for the component editor bar itself, which was therefore slotted properly next to our webcomponent. But as the start and end bars do not have the named slot, they are not displayed. This then also leads to the component bar not showing as it gets a display: none property from Magnolia due to the missing context from the start bar.&lt;ins&gt;{&lt;/ins&gt;}&lt;ins&gt;{&lt;/ins&gt;}&lt;/li&gt;
	&lt;li&gt;This approach is not compatible with our current grid component due to the dynamic reslotting I mentioned in my last mail. It takes several grid element components and slots them in slots provided based on the number of components. Hence, we would need to give the same component different slot names depending on how many there are and their order which is not possible with the configuration in the component.&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;
&lt;p&gt;I just checked in with &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=rsiska&quot; class=&quot;user-hover&quot; rel=&quot;rsiska&quot;&gt;rsiska&lt;/a&gt;&#160;about number 1 above - and he mentioned that &quot;Start and end bars do have the named slot if it&apos;s configured on either component or area template def.&quot;&lt;br/&gt;
Maybe there is somethjing specific about your project that is causing the above not to work? Could you share an example project/page where you get the incorrect behaviour? (Or is it not working for you on that project that you shared?)&lt;/p&gt;</comment>
                            <comment id="374938" author="czimmermann" created="Wed, 6 Sep 2023 08:35:10 +0200"  >&lt;p&gt;&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/flag.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; Flag added&lt;/p&gt;

&lt;p&gt;Waiting for demo project from Partner.&lt;/p&gt;</comment>
                            <comment id="375224" author="fillsinger" created="Thu, 7 Sep 2023 11:38:38 +0200"  >&lt;p&gt;Hello&#160; &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;Maybe there is somethjing specific about your project that is causing the above not to work&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;as we mentioned in our meeting on the 4th of September we probably had some technical issues with the provided JARS. Since we decided not to pursue this approach for now, we will stop investigating were the problem resides.&lt;/p&gt;</comment>
                            <comment id="375228" author="JIRAUSER22506" created="Thu, 7 Sep 2023 11:42:06 +0200"  >&lt;p&gt;Please find attached (&lt;span class=&quot;nobr&quot;&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/attachment/115960/115960_grid-example.zip&quot; title=&quot;grid-example.zip attached to PAGES-1167&quot;&gt;grid-example.zip&lt;sup&gt;&lt;img class=&quot;rendericon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/link_attachment_7.gif&quot; height=&quot;7&quot; width=&quot;7&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/sup&gt;&lt;/a&gt;&lt;/span&gt;) two very basic Magnolia components using our Frontend Grid Webcomponent, the &lt;b&gt;ui-cms-grid&lt;/b&gt; with its &lt;b&gt;ui-cms-grid-elements&lt;/b&gt;.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;By integrating the grid example and adding grid element examples to its area, it can be easily seen that the editor bars are not working properly: all magnolia bars for the area as well as the grid element components are placed below the grid elements.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Furthermore, inspecting the dom reveals the slots generated by the Frontend: each of these full-width elements is placed in its own slot in the order they are passed in to the Frontend, labeled 0, 1, 2,...&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;This means that an interface with a slot name on a component level is not possible, as the grid elements will receive different slot names.&lt;/p&gt;

&lt;p&gt;Furthermore, wrapping the elements with divs will break the Frontend logic looking for grid elements.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;If the editor bars for the component were to be placed inside the webcomponent &amp;lt;ui-cms-grid-element&amp;gt;, the component editor bars would be properly slotted already, so you should be able to use this example to verify a potential solution for our use case, but also to get a glimpse into a more complex use-case of slots, where there is no clear interface for the slot names between the Backend and the Frontend.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;If any issues integrating this example or further questions arise, please do not hesitate to contact us via Ticket/Mail.&lt;/p&gt;</comment>
                            <comment id="382700" author="rsiska" created="Mon, 30 Oct 2023 10:22:40 +0100"  >&lt;p&gt;Current solution implements new &lt;tt&gt;containerElements&lt;/tt&gt; attribute in the template definition. It is a list of HTML element names for which the greenbars will be inserted into, not above the component. It is configured in the page definition and it applies for the whole page. E.g.:&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-java&quot;&gt;
renderType: freemarker
templateScript: /union-investment/templates/pages/main.ftl
containerElements:
  - ui-cms-grid-element
&#160; - other-element
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;The solution is on &lt;tt&gt;feature/&lt;a href=&quot;https://jira.magnolia-cms.com/browse/PAGES-1167&quot; title=&quot;Incorrect placement of green bars with Web Components&quot; class=&quot;issue-link&quot; data-issue-key=&quot;PAGES-1167&quot;&gt;PAGES-1167&lt;/a&gt;&lt;/tt&gt; branches of &lt;tt&gt;PLATFORM/main&lt;/tt&gt; and &lt;tt&gt;MODULES/pages&lt;/tt&gt;&lt;/p&gt;</comment>
                            <comment id="386459" author="JIRAUSER22506" created="Mon, 27 Nov 2023 11:16:56 +0100"  >&lt;p&gt;Hi all,&lt;/p&gt;

&lt;p&gt;sorry for the unexpectedly long delay.&#160;&lt;/p&gt;

&lt;p&gt;I was able to test the implementation in the context of our project and am happy to report that it works as expected and solves many issues with the editor bars for us! Thank you for your work.&lt;/p&gt;

&lt;p&gt;I only noticed two issues where the editor bars are not yet as expected. One issue we can fix on our end by refactoring the component to use the solution you provided.&lt;/p&gt;

&lt;p&gt;The second issue and as far as I know only remaining issue is that we are unable to specifically slot the start and end bar of an area, which leads to the start bar not being at the actual start of the component area when we slot something specific above the generic slot.&lt;br/&gt;
However, this only occurs in two places total and in my opinion is both a very specific use case and not as big of a problem as the previous ones were. Therefore, I will check with our stakeholders if anyone there is still a need on their end on pursuing a fix for this last case.&lt;br/&gt;
I will get back to you in either case.&lt;/p&gt;

&lt;p&gt;Do you have a rough estimation of the Magnolia Release/Version this fix would be deployed in for me to pass on?&lt;/p&gt;

&lt;p&gt;Kind regards and thank you again,&lt;br/&gt;
Ferdinand&lt;/p&gt;</comment>
                            <comment id="387244" author="czimmermann" created="Fri, 1 Dec 2023 08:47:01 +0100"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=fbadenberg&quot; class=&quot;user-hover&quot; rel=&quot;fbadenberg&quot;&gt;fbadenberg&lt;/a&gt; thanks for the update. Great to hear that it is working. I don&apos;t have a version/date when it will be released. As we need to look into how it fits into the current priority landscape and have some personel on break as well.&#160;&lt;/p&gt;

&lt;p&gt;Thanks for your further checks and updates.&lt;/p&gt;</comment>
                    </comments>
                <issuelinks>
                            <issuelinktype id="10010">
                    <name>relation</name>
                                                                <inwardlinks description="is related to">
                                                        </inwardlinks>
                                    </issuelinktype>
                    </issuelinks>
                <attachments>
                            <attachment id="114249" name="Screenshot 2023-07-26 at 15.36.26.png" size="117998" author="bstaryga" created="Wed, 26 Jul 2023 15:39:29 +0200"/>
                            <attachment id="111502" name="Scrreenshot of editor view.png" size="142691" author="rgange" created="Wed, 17 May 2023 11:56:11 +0200"/>
                            <attachment id="111501" name="Simple Webcomponent Example.zip" size="8215" author="rgange" created="Wed, 17 May 2023 11:51:03 +0200"/>
                            <attachment id="115960" name="grid-example.zip" size="1891" author="fbadenberg" created="Thu, 7 Sep 2023 11:41:29 +0200"/>
                    </attachments>
                <subtasks>
                    </subtasks>
                <customfields>
                                                                            <customfield id="customfield_14166" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Acceptance criteria</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                                    <div class="o-completion" style="display: flex; flex-shrink: 0;"><span  class="aui-lozenge aui-lozenge-complete" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="white"><path clip-rule="evenodd" d="m10.41037,3.42544l-7.86501,0c-0.72395,0 -1.31084,0.58688 -1.31084,1.31084l0,7.86508c0,0.7239 0.58689,1.3108 1.31084,1.3108l7.86501,0c0.724,0 1.3109,-0.5869 1.3109,-1.3108l0,-7.86508c0,-0.72396 -0.5869,-1.31084 -1.3109,-1.31084zm-7.86501,-0.65542c-1.08593,0 -1.96626,0.88032 -1.96626,1.96626l0,7.86508c0,1.0859 0.88033,1.9662 1.96626,1.9662l7.86501,0c1.086,0 1.9663,-0.8803 1.9663,-1.9662l0,-7.86508c0,-1.08594 -0.8803,-1.96626 -1.9663,-1.96626l-7.86501,0z" fill-rule="evenodd"/><path d="m5.09049,10.18526l-1.82767,-1.82766l-0.78479,0.78479l2.61246,2.61246l5.38758,-5.38754l-0.78483,-0.78479l-4.60275,4.60274z"/></svg></span><span>Empty</span></span></div>
                        ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_10111" key="com.atlassian.jira.toolkit:reporterdomain">
                        <customfieldname>Company</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>illsinger.de</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_10031" key="com.atlassian.jira.ext.charting:firstresponsedate">
                        <customfieldname>Date of First Response</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>Wed, 17 May 2023 11:54:32 +0200</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_12730" key="com.atlassian.jira.plugins.jira-development-integration-plugin:devsummary">
                        <customfieldname>Development</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_14151" key="com.atlassian.jira.toolkit:message">
                        <customfieldname>Docu info</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10246" key="com.pyxis.greenhopper.jira:gh-epic-link">
                        <customfieldname>Epic Link</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>DEV-919</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_10240" key="com.atlassian.jira.plugin.system.customfieldtypes:multicheckboxes">
                        <customfieldname>Flagged</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="10500"><![CDATA[Impediment]]></customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                            <customfield id="customfield_10061" key="com.atlassian.jira.toolkit:lastusercommented">
                        <customfieldname>Last comm is not jira-dev</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>true</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10071" key="com.atlassian.jira.toolkit:lastupdaterorcommenter">
                        <customfieldname>Last participant</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>czimmermann</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_13136" key="com.atlassian.jira.toolkit:LastCommentDate">
                        <customfieldname>Last public comment date</customfieldname>
                        <customfieldvalues>
                            10 weeks, 2 days ago
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10020" key="com.atlassian.jira.toolkit:attachments">
                        <customfieldname>Number of attachments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>4.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10150" key="com.atlassian.jira.toolkit:comments">
                        <customfieldname>Number of comments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>8.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <customfield id="customfield_10011" key="com.atlassian.jira.toolkit:participants">
                        <customfieldname>Participants</customfieldname>
                        <customfieldvalues>
                                        <customfieldvalue>czimmermann</customfieldvalue>
            <customfieldvalue>fillsinger</customfieldvalue>
            <customfieldvalue>fbadenberg</customfieldvalue>
            <customfieldvalue>rsiska</customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                <customfield id="customfield_10833" key="com.pyxis.greenhopper.jira:gh-lexo-rank">
                        <customfieldname>Rank</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0|hzztvm:60o4425w099cbtqp</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10244" key="com.pyxis.greenhopper.jira:gh-global-rank">
                        <customfieldname>Rank (Obsolete)</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>9223372036854775807</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <customfield id="customfield_12430" key="com.atlassian.teams:rm-teams-custom-field-team">
                        <customfieldname>Team</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue><![CDATA[26]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_14145" key="com.intenso.jira.issue-templates:issue-templates-customfield">
                        <customfieldname>Template</customfieldname>
                        <customfieldvalues>
                            

    <customfieldvalue>PD Sub-Task Automation</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_15131" key="com.onresolve.jira.groovy.groovyrunner:scripted-field">
                        <customfieldname>Time in Discovery</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>1945</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                        <customfield id="customfield_13933" key="com.atlassian.jira.plugin.system.customfieldtypes:select">
                        <customfieldname>Urgency (resolution)</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="15724"><![CDATA[Normal]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                </customfields>
    </item>
</channel>
</rss>