Planned for Future Release

This is currently planned for a future release The format would look something like the following.

Element Potential Format
Page
<div data-tridion-page-id="tcm:1-100-64-5"
     data-tridion-page-modified="2018-01-20T10:20:00"
     data-tridion-page-template-id="tcm:1-200-64-7"
     data-tridion-page-template-modified="2018-01-20T10:20:00">
</div>
Component Presentation
<div data-tridion-component-id="tcm:1-64-3"
     data-tridion-component-modified="2018-01-20T10:20:00"
     data-tridion-component-template-id="tcm:1-150-128-5"
     data-tridion-component-template-modified="2018-01-20T10:20:00"
     data-tridion-is-dynamic-component-presentation="false">
</div>
Field
<p data-tridion-component-field="$.tcm_Content.custom_Content.custom_Field[1]">
  Value to edit
</p>

Experience Manager markup in HTML data attributes

The XPM markup used on a staging website is written in the form of HTML comments. It would very practical if we can use HTML5 data attributes instead.

 

The use of HTML comments is not always practical:
- Frontend frameworks (JavaScript in the browser) can remove HTML comments. Vue for example removes all HTML comments, and this behaviour cannot be disabled.
- CDNs can interfere with HTML comments. Akamai for example has a feature which strips unnecessary things like HTML comments from the page.

 

Since the introduction of Experience Manager (known as SiteEdit at the time) a lot has changed and today it is possible to use HTML5 data attributes.


Instead of this

<article class="col-md-6" prefix="s: http://schema.org/" typeof="s:Article">
<!-- Start Component Presentation: {"ComponentID":"tcm:29-2603","ComponentModified":"2017-01-20T15:51:54","ComponentTemplateID":"tcm:29-2602-32","ComponentTemplateModified":"2017-01-23T12:00:19","IsRepositoryPublished":false} -->

<h1 property="s:headline">
<!-- Start Component Field: {"XPath":"tcm:Content/custom:Article/custom:heading[1]"} -->
Hello, World!
</h1>

We could have something like this

<article class="col-md-6" prefix="s: http://schema.org/" typeof="s:Article"
  data-xpm-componentId="tcm:29-2603" data-xpm-componentModified="2017-01-20T15:51:54" data-xpm-componentTemplateId="tcm:29-2602-32" data-xpm-componentTemplateModified="2017-01-23T12:00:19" data-xpm-isRepositoryPublished="false">

<h1 property="s:headline" data-xpm-fieldXpath="tcm:Content/custom:Article/custom:heading[1]">
  Hello, World!
</h1>

Parents
  • Definitely a good idea that happens to align well with the way that XPM markup is done in DXA; if you look at DXA Views, it seems that the XPM markup is actually injected as HTML attributes, but some DXA magic transforms it into HTML comments.  If XPM uses HTML attributes, this magic can be omitted.

Comment
  • Definitely a good idea that happens to align well with the way that XPM markup is done in DXA; if you look at DXA Views, it seems that the XPM markup is actually injected as HTML attributes, but some DXA magic transforms it into HTML comments.  If XPM uses HTML attributes, this magic can be omitted.

Children
No Data