tailor icon indicating copy to clipboard operation
tailor copied to clipboard

Custom Tags wraps html

Open UriZeliger opened this issue 6 years ago • 1 comments

I wanted to use custom tags in order to set style="direction:rtl;" (or style="direction:ltr") on content that that fetched from fragment. so my html will look something like this

<!doctype html>
<html>

<head>
    <script type="fragment" id="fragment-common" primary></script>
</head>

<body>
    <meta-direction>
        <p>
            <fragment primary id="fragment-1" src="http://localhost:8081"></fragment>
        </p>
    </meta-direction>
</body>
</html>

If I replace meta-direction tag it just refer to the opening position. I can set my Html like this:

<body>
    <meta-direction>
        <p>
            <fragment primary id="fragment-1" src="http://localhost:8081"></fragment>
        </p>
    </div>
</body>

but then I don't have matching tags in my markup.

UriZeliger avatar Jul 02 '19 08:07 UriZeliger

@UriZeliger If you have passed the corresponding tags in the handleTags option, you would get the matching closingTag for the same.

const tailor = new Tailor({
  handleTags: ['meta-direction'],
  handleTag: (req, tag) => {
    if (tag.name === 'meta-direction') {
      return '<div>'
    }

    if (tag.closingTag === 'meta-direction') {
      // closing
      return '</div>'
    }
  }
})

Hope this helps.

vigneshshanmugam avatar Jul 02 '19 10:07 vigneshshanmugam