[기타] 답변입니다.

결론부터 말씀드리자면, 

동일 태그 내에서 data-inven-id의 복수지정은 불가능합니다.

다른 속성과 마찬가지로 id가 여러번 서술된 경우, 한가지만 인식되네요.

data-inven-id의 경우에는 먼저 쓰여진 id가 인식되는 듯합니다.

<!-- BLOCKS -->
<div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;"
data-inven-id="part1"
data-inven-id="common">
</div>

<div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;"
data-inven-id="common"
data-inven-id="part2">
</div>

<!-- BUTTONS -->
<div style="margin-top:10px; margin-left:20px;">

<div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:red; cursor:pointer;"
data-inven-over-css="{'part1':{'background-color':'black'}}"
data-inven-out-css="{'part1':{'background-color':'red'}}"
data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}">
</div>

<div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:blue; cursor:pointer;"
data-inven-over-css="{'part2':{'background-color':'black'}}"
data-inven-out-css="{'part2':{'background-color':'blue'}}"
data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}">
</div>

</div> 

두 개의 블록에 공통적으로 "common"이라는 id를 지정하고

개별적으로 "part1", "part2" id를 지정했습니다.

보시는 바와 같이

첫 번째 블록에는 part1을 우선 지정하고 common을 지정하였으며

두 번째 블록에는 common을 우선 지정하고 part2를 지정하였습니다.

 

그 결과,

각각 part id에 대해 작동하는 over 및 out css는

part1가 먼저 지정된 첫 번째 블록에 작동하지만

part2가 나중에 지정된 두 번째 블록에는 작동하지 않습니다.

그리고 common id에 대해 작동하는 click css는

common이 먼저 지정된 두 번째 블록에 작동하지만

common이 나중에 지정된 첫 번째 블록에는 작동하지 않습니다.

즉, 첫 번째 블록의 id는 "part1" 으로,

    두 번째 블록의 id는 "common" 으로 인식되네요.

각각 먼저 지정된 id를 해당 태그의 id로 인식합니다.

<!-- BLOCKS -->
<div style="transition:0.3s;" data-inven-id="common">

<div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;"
data-inven-id="part1">
</div>

<div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;"
data-inven-id="part2">
</div>

</div>

<!-- BUTTONS -->
<div style="margin-top:10px; margin-left:20px;">

<div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:red; cursor:pointer;"
data-inven-over-css="{'part1':{'background-color':'black'}}"
data-inven-out-css="{'part1':{'background-color':'red'}}"
data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}">
</div>

<div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:blue; cursor:pointer;"
data-inven-over-css="{'part2':{'background-color':'black'}}"
data-inven-out-css="{'part2':{'background-color':'blue'}}"
data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}">
</div>

</div> 

  

id의 중복 지정을 위해서는 상위 태그에 공통 id를 지정하는 수밖에 없는 듯합니다.

물론, 태그들이 인접해야 한다는 커다란 제약점이 있기에 class와 같은 사용은 힘들 것 같습니다.

개인적인 생각으로,

인벤 스크립트의 속성으로 data-inven-class라도 지원해주었으면 정말 좋겠네요.

<div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;"
data-inven-class="common"

data-inven-id="part1">
</div>

<div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;"
data-inven-class="common"
data-inven-id="part2">
</div>

이런식으로 data-inven-id와 동등한 수준의 속성이라도 지원해준다면 편리할 것 같은데 해줄지는 미지수네요..